はじめに

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側でパスの先頭部分にルートパスを付与するような関数まで作っていたのですが、、笑

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

終わり

参考