Rails 7富文本区域上传图片不显示问题排查与解决求助

可能的原因 #

1. Active Storage 未正确配置或启用，Action Text 依赖 Active Storage 处理文件上传
2. 前端未加载 Action Text 所需的 JavaScript 和样式文件
3. 开发环境下的存储服务配置错误，导致图片无法被正确访问

修复步骤 #

1. 确认 Active Storage 配置正确 #

首先确保 Active Storage 已安装并完成迁移：

rails active_storage:install
rails db:migrate

检查 config/storage.yml 中的 local 配置（开发环境默认使用）是否正确：

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>
  public: false

在 config/environments/development.rb 中确认存储服务指向 local：

config.active_storage.service = :local

2. 加载 Action Text 前端资源 #

如果使用 Importmap（Rails 7 默认）：

• 在 config/importmap.rb 中添加：

  pin "@rails/actiontext", to: "actiontext.js"
  

• 在 app/javascript/application.js 中导入：

  import "@rails/actiontext"
  

如果使用 Tailwind CSS，在 app/assets/stylesheets/application.tailwind.css 中导入样式：

@import "actiontext";

如果使用普通 CSS，在 app/assets/stylesheets/application.css 中添加：

*= require actiontext

3. 确保视图正确渲染富文本内容 #

在 Post 的展示视图（app/views/posts/show.html.erb）中，直接使用模型的 content 属性渲染，无需手动转义：

<%= @post.content %>

4. 重启 Rails 服务器 #

修改配置和资源文件后，必须重启服务器才能生效：

rails server restart

完成以上步骤后，重新上传图片即可正常显示。

内容的提问来源于stack exchange，提问作者Đỗ Như Vỹ