在Rails应用中借助Active Admin实现图片展示及获取图片URL

场景说明 #

我是Ruby新手，正在为iOS开发配套的Rails后端，目前开发前端部分。TeamMember模型代码如下：

class TeamMember < ApplicationRecord
    has_one_attached :main_image
end

已通过Active Admin完成图片上传，但在视图中使用现有代码无法正常展示图片，显示破碎的占位图。现需解决两个问题：

1. 如何在HTML视图中正常展示上传的图片？
2. 如何获取图片URL并通过JSON返回，供iOS应用下载使用？

1. HTML视图中展示图片 #

用Rails自带的image_tag结合Active Storage的URL生成方法即可解决，同时建议处理图片未上传的 fallback 场景：

<%# 在ERB视图文件中 %>
<% if @team_member.main_image.attached? %>
  <%# 生成完整图片URL并渲染img标签 %>
  <%= image_tag rails_blob_url(@team_member.main_image), alt: "团队成员头像", class: "team-avatar" %>
<% else %>
  <%# 图片未上传时显示默认图 %>
  <%= image_tag "default-avatar.png", alt: "默认头像" %>
<% end %>

• rails_blob_url会生成带完整域名的图片访问地址，也可以用url_for替代（效果一致）
• 确保你的Rails路由文件中包含rails_storage_routes（默认新建项目已自动添加，无需手动配置）

2. 返回图片URL给iOS应用 #

可以通过两种方式实现，确保返回完整带域名的URL（iOS端可直接下载）：

方式一：模型中添加URL方法（快速实现）

在TeamMember模型中新增方法，直接生成图片URL：

class TeamMember < ApplicationRecord
  has_one_attached :main_image

  # 返回完整图片URL，未上传则返回nil
  def main_image_url
    main_image.attached? ? rails_blob_url(main_image, only_path: false) : nil
  end
end

然后在控制器中返回JSON时，包含这个方法的结果：

# app/controllers/team_members_controller.rb
def show
  @team_member = TeamMember.find(params[:id])
  render json: @team_member.as_json(methods: :main_image_url)
end

方式二：使用序列化器（规范方案，适合复杂场景）

如果项目使用Active Model Serializers，可以创建序列化器统一处理JSON结构：

# app/serializers/team_member_serializer.rb
class TeamMemberSerializer < ActiveModel::Serializer
  attributes :id, :name, :main_image_url # 按需添加其他模型属性

  def main_image_url
    object.main_image.attached? ? rails_blob_url(object.main_image, only_path: false) : nil
  end
end

控制器中调用序列化器：

def show
  @team_member = TeamMember.find(params[:id])
  render json: @team_member, serializer: TeamMemberSerializer
end

• only_path: false参数确保生成的URL包含完整域名，iOS端无需额外拼接即可直接请求。

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