railsAPIでのcarrierwaveの使用において、デフォルト画像がフロント側で参照できないのはなぜか？

Question

お世話になっております。

現在、Nuxt.jsとrailsにてスケジュール作成アプリを作っており、スケジュールの投稿に画像の添付機能を加えているところです。

投稿時に画像を設定した場合は、投稿後にそのページへいくと下記のURLへリクエストをしており、期待通り画像が表示されます。
http://localhost:3001/uploads/schedule/s_image/274/tech001.png

しかし、画像を設定しなかった場合はリクエストURLが
GET http://localhost:3000/fallback/default.png 404 (Not Found)
となり、画像を得られません。

私はポートが3001と3000で違うためだと考えておりますが、変更方法がわかりません。

carrierwaveの設定は以下です。

# carrierwave.rb

CarrierWave.configure do |config|
  config.asset_host = 'http://localhost:3001'
end

アップローダーのファイルは以下です。

# app/uploaders/schedule_image_uploader.rb

class ScheduleImageUploader < CarrierWave::Uploader::Base
  storage :file

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  def default_url(*_args)
    # For Rails 3.1+ asset pipeline compatibility:
    ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
    # "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  end

  def extension_whitelist
    %w(jpg jpeg png)
  end
end

railsのpublic以下のディレクトリ構造は以下です。

~/a/b/public ❯❯❯ tree
.
├── fallback
│   └── default.png
├── images
│   └── fallback
│      └── default.png
├── robots.txt
└── uploads
    ├── schedule
    │  └── s_image
    │      └── 274
    │          └── tech001.png

やってみたこと

以下のようにアップローダーの保存先を変えて見ましたが、やはり同じくポートが3000で404エラーが返ってきました。

def default_url(*_args)
  # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_')) # コメントアウト
  "/images/fallback/" + [version_name, "default.png"].compact.join('_') # コメントを外した
end

バージョン情報

ruby 2.6.3
rails (6.0.3.4)
carrierwave (2.1.0)

お忙しいとは存じますが、よろしくお願いいたします。

Answer 1

default_url としてホストを含まないパスのみが記録されているんじゃないでしょうか。
<img src="/fallback/default.png"> これでnuxtの3000番にリクエストしてしまう。

ActionController::Base.helpers.asset_path は
config.action_controller.asset_host　が設定されているとホストを含むURLを返すようなので

config/environment/development.rb に

config.action_controller.asset_host = 'http://localhost:3001'  

と記述してみてください。

この設定後に作られたやつは大丈夫だと思いますが、
すでに保存済みのはこの値を何らかの方法で再設定する必要があるかもしれません。

Comments

[msickpaler]

回答ありがとうございます。

アドバイス通り記述してみると、うまくホストが設定されて画像が表示されました！
お恥ずかしながら、あたふたとして、メソッドを調べることを失念しておりました。

dev環境ですのでデータはseedで作り直すことにします。

ありがとうございました！