如何为Work页面各区块配置独立图片实现CRUD（Cloudinary托管）

1. 修改Work模型 #

为每个需要独立图片的区块添加专属的附件关联：

class Work < ApplicationRecord
  has_one_attached :header_photo
  has_one_attached :tasks_photo
  has_one_attached :content1_photo
  has_one_attached :content2_photo
end

2. 更新Work#new视图 #

把每个区块的通用:photo输入字段替换为对应区块的专属图片字段：

<div class="container text center">
  <%= simple_form_for(@work) do |f| %>
    <div class="row justify-content-center">
      <div class="col-md-6 col-sm-12">
      <h1 class="heading-02" style="padding: 2rem 0rem;">New Work</h1>
        <div class="work-new-section">
          <h2 class="sub-heading-03">Header</h2>
          <%= f.input :name %>
          <%= f.input :description %>
          <%= f.input :header_photo, as: :file %>
        </div>
        <div class="work-new-section">
          <h2 class="sub-heading-03">Tasks</h2>
          <%= f.input :task_title %>
          <%= f.input :tasks %>
          <%= f.input :tasks_photo, as: :file %>
        </div>
        <div class="work-new-section">
          <h2 class="sub-heading-03">Content#1</h2>
          <%= f.input :content1_title %>
          <%= f.input :content1 %>
          <%= f.input :content1_photo, as: :file %>
        </div>
        <div class="work-new-section">
          <h2 class="sub-heading-03">Focus</h2>
          <%= f.input :focus_title %>
          <%= f.input :focus %>
        </div>
        <div class="work-new-section">
          <h2 class="sub-heading-03">Content#2</h2>
          <%= f.input :content2_title %>
          <%= f.input :content2 %>
          <%= f.input :content2_photo, as: :file %>
        </div>
        <%= f.submit 'Create a new Work', :class => 'button-accent mb-4' %>
      </div>
    </div>
  <% end %>
</div>

3. 配置控制器强参数 #

在works_controller.rb中，允许新增的图片参数通过表单提交：

def work_params
  params.require(:work).permit(
    :name, :description, :task_title, :tasks, 
    :content1_title, :content1, :focus_title, :focus,
    :content2_title, :content2,
    :header_photo, :tasks_photo, :content1_photo, :content2_photo
  )
end

4. 更新Work#show视图 #

在展示页面的局部模板中，调用对应区块的专属图片：

<div class="container">
  <!-- Header区块图片展示 -->
  <div class="row">
    <div class="col-md-4 col-sm-12">
      <% if @work.header_photo.attached? %>
        <%= cl_image_tag @work.header_photo.key, :class=> "work-image", :width => 420, :height => 236, :crop => "fill"  %>
      <% end %>
    </div>
  </div>

  <!-- Content#1区块图片及内容展示 -->
  <div class="row">
    <div class="col-md-4 col-sm-12">
      <% if @work.content1_photo.attached? %>
        <%= cl_image_tag @work.content1_photo.key, :class=> "work-image", :width => 420, :height => 236, :crop => "fill"  %>
      <% end %>
    </div>
    <div class="col-md-4 col-sm-12">
      <h2 class="sub-heading-03"><%= @work.content1_title %></h2>
      <p class="ui-regular-01"><%= @work.content1 %></p>
    </div>
  </div>

  <!-- Tasks、Content#2区块的图片展示可参照上述格式添加 -->
</div>

补充说明 #

• 确保项目已正确配置Active Storage与Cloudinary的集成
• 可根据需求在模型中添加图片验证逻辑（如尺寸、格式限制）

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