Vue.js无法显示Ruby on Rails ActiveStorage文件问题求助

从你的错误日志和代码来看，问题的核心是图片请求被错误路由到了ApplicationController#index，而这个控制器动作没有处理图片格式的响应，导致返回406 Not Acceptable错误。下面是一步步的解决方案：

1. 修复Rails路由配置（关键） #

你的日志里显示请求参数包含slug: "rails/active_storage/blobs/..."，这说明你有一个**catch-all路由（比如/:slug）**在ActiveStorage路由之前，导致图片请求被错误捕获。

打开config/routes.rb，把ActiveStorage的引擎挂载放在所有catch-all路由的前面：

# config/routes.rb
Rails.application.routes.draw do
  # 优先挂载ActiveStorage路由，确保图片请求被正确处理
  mount ActiveStorage::Engine => '/rails/active_storage'

  # 其他业务路由
  resources :books
  # ... 你的其他路由

  # Catch-all路由要放在最后，避免干扰ActiveStorage等系统路由
  get '/:slug', to: 'application#index'
end

2. 验证ActiveStorage路由是否生效 #

运行rails routes命令，检查输出中是否包含ActiveStorage的blob路由：

rails_service_blob GET    /rails/active_storage/blobs/:signed_id/*filename(.:format) active_storage/blobs#show

如果能看到这条路由，说明挂载成功。

3. 确认Serializer的图片URL生成正确 #

你的Serializer代码是没问题的，但可以再确认一下：

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

这个方法会生成正确的相对路径，Vue的q-img组件可以直接使用这个路径请求图片。

4. 测试图片请求 #

重启Rails服务器后，直接在浏览器中访问错误日志里的图片URL（比如http://localhost:3000/rails/active_storage/blobs/.../webpacker.png），如果能正常显示图片，说明问题已经解决，Vue组件也能正常加载图片了。

错误原因复盘 #

当请求图片时，路由系统先匹配到了你的/:slug路由，把整个/rails/active_storage/blobs/...路径当成了slug参数，转发给ApplicationController#index。而这个动作没有针对image/png格式的响应模板，所以返回了406 Not Acceptable错误。调整路由顺序后，图片请求会被ActiveStorage::Engine正确处理，返回图片资源。

内容的提问来源于stack exchange，提问作者iL53n