无法在Vue.js（Ruby on Rails活动存储）中显示我的ActiveStorage文件

Question

无法在Vue.js中显示我的ActiveStorage文件

控制器

  def attach_main_pic(book)
    book.image.attach(book_params[:image])
  end

序列化器

  def image_url
    rails_blob_url(object.image, only_path: true) if object.image.attached?
  end

我尝试在vue文件q-img(v-bind:src="props.row.image_url" style="height: 140px; max-width: 150px")中显示我的图像

错误

Started GET "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBKQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bb6cc9ed04caddbfb70c65cb5ef666ef65359c2a/webpacker.png" for ::1 at 2020-01-20 20:05:04 +0300
Processing by ApplicationController#index as PNG
  Parameters: {"slug"=>"rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBKQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bb6cc9ed04caddbfb70c65cb5ef666ef65359c2a/webpacker"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 3], ["LIMIT", 1]]
Completed 406 Not Acceptable in 47ms (ActiveRecord: 0.4ms)



ActionController::UnknownFormat - ApplicationController#index is missing a template for this request format and variant.

request.formats: ["image/png"]
request.variant: []:

Answer 1

[最有可能，您使用get '/*', to: 'application#index'拦截了所有路径例如，您可以使用路线约束：

get '/*slug', to: 'application#index', constraints: lambda { |request| !request.fullpath.include?('rails/active_storage') }