Can't show my ActiveStorage file in Vue.js (Ruby on Rails Active Storage)

Question

Can't show my ActiveStorage file in Vue.js

Controller

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

Serializer

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

I try show my image in vue file q-img(v-bind:src="props.row.image_url" style="height: 140px; max-width: 150px")

ERROR

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

Most likely, you intercept all paths using get '/*', to: 'application#index' For example, you can use route constraint:

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