質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Devise

Deviseとは、Ruby-on-Railsの認証機能を追加するプラグインです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1407閲覧

carrierwaveで保存した画像をReactで表示する事ができません。

Tatsu0219

総合スコア2

Devise

Deviseとは、Ruby-on-Railsの認証機能を追加するプラグインです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/10/08 10:48

閲覧いただきありがとうございます。
表題の件で質問させていただきます。

userのアカウントをdeviseにて作成し、そちらに画像をアップロードするべくcarrierwaveの使用しました。

carrierwaveの設定

carrierwave.rb

CarrierWave.configure do |config| config.asset_host = "http://localhost:3001" config.storage = :file config.cache_storage = :file end

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base include CarrierWave::MiniMagick def store_dir "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end process resize_to_fill: [20, 20] def extension_allowlist %w(jpg jpeg) end uploader/store.rb for details. end

結果として、アップロードまでは問題なく進みましたが、React側での出力ができませんでした。

allowPasswordChange: false createdAt: "2021-10-07T08:47:31.552Z" email: "takuro@simaenaga.com" id: 2 image: {url: 'http://localhost:3001/uploads/user/image/2/tomato.jpg'} name: "きゅうり" nickname: null provider: "email" rank: 0 uid: "takuro@simaenaga.com" updatedAt: "2021-10-08T09:23:46.649Z"

Railsのpublic>uploads>user>image>2にはtomato.jpg画像が保存されています。(クリックすると、読み取り専用として目視できます。)
しかしながら、React側でcurrentUser?.image.urlとすると表示されるものだと思っていましたが表示されませんでした。
(currentUserというのは、deviseで作成したユーザーになります。)

<img src={currentUser?.image.url} alt='avatar' />

行ったこと

  • publicに保存されている画像を参照できるwindow.location.originを使用して画像をひとまず表示させようと思いましたがこちらも表示されませんでした。
<img src={`${window.location.origin}/sample.jpeg`} alt='avatar' width='20' height='20' />
  • コンソールにcurrentUser?.image.urlを出力し、URLを取得しそれをディベロッパーツールでクリックしたところ画像のプレビューは表示されませんでした。

![イメージ説明

不備などあれば追加致しますので、仰っていただければと思います。
長々と読んでいただきありがとうございました。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

carrierwave.rbのasset_hostがバックエンド側のドメイン名を選択しなければならないところで、フロント側のものを記載していました。
一度根本に立ち返り、確認作業を行おうと思い直しました。

皆様のお役に立てればと思います。

投稿2021/10/08 12:52

Tatsu0219

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問