0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails Nuxtでcarrierwaveを使って画像を保存したときのはまったポイント

0
Posted at

はじめに

RailsのGemであるcarriewaveを使って画像保存機能を実装しました。
その際、なぜか保存はできているのに表示することができなくなりました。
解決するのに時間がかかりましたので備忘録として記載しておきます。
間違い等ございましたらご指摘いただけますと幸いです。

注意
今回の記事では、保存方法やcarrierwaveの使い方みたいな説明は省いております。
ご了承ください

環境

  • Rails 7.0.4
  • Ruby 3.1.2
  • carrierwave 2.2.3
  • Nuxt 2.15.8(SSR)

事象

冒頭でも記載しましたが、起きた事象としてはNuxtからデータを送り保存処理がうまくいっているのに、画面に画像が表示されないというものでした。
この事象の厄介な部分は、最初はうまく表示されていたのに急に表示されなくなったことです。
追加で別のモデルにて画像を保存しようと実装していたら急に画像が表示されなくなり、別モデル側に問題があるのではないかと思いましたが、全くの別問題でした。

結論

それでは結論です。
uploadersファイルにて、パスを明記することで解決しました。

app/uploaders/avatar_uploader.rb
  def asset_host
    return "http://localhost:3000" if Rails.env.development?
  end

画像を保存するとテーブルにパスが登録されます。
そのバスはよく見ると、「/uploader~~」のように、ルートパスが設定されていません。
その部分をしっかりと設定しておくと問題なく画像を表示できるようになりました。
私の場合、NuxtとRailsでポート番号を変えていたのでこの問題が起こったようです。

最初うまくいっていたのが、謎ですが、、、

私の場合は開発環境のみルートパス込みのパスを指定しております。

補足

下記の記事を見つけて理解が深まりました。
私の場合はうまくいかなかったのですが、今思うとconfigファイル修正後にリロードのし忘れな可能性もありますね。。。

ちなみに、chromeのデベロッパーツールにて、パス部分に直接パスを入力すると画像が表示されることが解決の糸口になりました。

それまではNuxt側でパスの先頭部分にルートパスを付与するような関数まで作っていたのですが、、笑

どなたかの参考になれば幸いです。

終わり

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?