如何基于Active Storage实现帖子中文字与图片交替排列？

要达成「文本-图片-文本-图片」的交替显示效果，核心是将文本内容拆分为对应段落，再与图片数组进行交替组合渲染。以下是具体实现方案：

步骤1：整理文本与图片数据 #

在视图中先处理文本和图片的数据源，确保两者能对应上：

<% # 按空行把body拆分为独立文本段落，可根据需求调整分隔规则 %>
<% text_blocks = @post.body.split("\n\n").reject(&:blank?) %>
<% # 合并主图与附加图片为统一数组，过滤空值 %>
<% images = ([@post.image] + @post.pictures).compact %>

步骤2：交替渲染内容 #

通过循环将文本段落与图片按顺序交替输出，确保布局符合预期：

<% # 取文本和图片数组的最大长度，保证所有内容都能被渲染 %>
<% max_length = [text_blocks.length, images.length].max %>

<% max_length.times do |i| %>
  <% # 渲染对应索引的文本段落（存在则显示） %>
  <% if text_blocks[i].present? %>
    <p><%= text_blocks[i].html_safe %></p>
  <% end %>

  <% # 渲染对应索引的图片（存在则显示） %>
  <% if images[i].present? %>
    <p><%= image_tag images[i] %></p>
    <br>
  <% end %>
<% end %>

完整视图代码 #

替换原有视图代码为以下内容即可：

<p><%= @post.title %></p>

<% text_blocks = @post.body.split("\n\n").reject(&:blank?) %>
<% images = ([@post.image] + @post.pictures).compact %>
<% max_length = [text_blocks.length, images.length].max %>

<% max_length.times do |i| %>
  <% if text_blocks[i].present? %>
    <p><%= text_blocks[i].html_safe %></p>
  <% end %>

  <% if images[i].present? %>
    <p><%= image_tag images[i] %></p>
    <br>
  <% end %>
<% end %>

注意事项 #

• 文本拆分规则：示例按\n\n（空行）拆分段落，你可以根据实际需求改为其他分隔符（比如自定义标记<!-- split -->）。
• HTML格式保留：如果帖子body包含HTML标签，需保留格式的话要加上html_safe，否则标签会被转义。
• 空值过滤：用compact和present?过滤空的图片或文本段落，避免渲染无效内容。

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