使用导轨、涡轮框架和涡轮流推动图像时出现问题

Question

我需要（1）上传文件，（2）处理文件并生成变体，（3）将图像返回到浏览器。由于处理需要几秒钟，我希望视图更新以显示图像，以证明步骤 (2) 中的处理已开始，然后在步骤 (3) 中使用新的图像变体进行更新。步骤 (3) 的刷新是通过模型中的线路通过涡轮流发送的

broadcast_replace_later_to("documents")

步骤 1 和 2 效果很好。对于步骤 (3)，视图中的文本更新正常，但图像在某处被遮挡。如果我刷新页面（称为步骤 (4)），则会显示正确的图像。

我正在使用默认端口 3000、rails 7.0.8、turbo-rails 1.5.0、stimulus-rails 1.3.0 在开发模式下工作。

图像文件在每个阶段都有不同的 url。 （2）http://localhost:3000/assets/icon.png （3）（失败）http://localhost/rails/active_storage/representations/redirect/random/random/ Correctname.png （4）http://localhost:3000/rails/active_storage/representations/redirect/random/random/ Correctname.png

主机名似乎出了问题。我尝试在 ApplicationController 中使用 {host: 'localhost:3000'} 设置 default_url_options 且没有端口，但它没有帮助。

我尝试设置

config.action_cable.disable_request_forgery_protection = true

但图像仍然被阻止。 Firefox Webtools 显示请求被阻止。

我尝试更新到 Rails 7.1.1，但得到相同的结果：图像 URL 和一些链接 URL 缺少“:3000”端口号。

Answer 1

我们可以直接使用

<%= image_tag url_for(user.avatar) %>

显示 Turbo Stream 中的任何图像。

例如，使用 Turbo Stream 显示实时发布通知，我们可以使用以下代码来发布部分

<!-- app/views/notifications/_post.html.erb -->
<div class="flex items-start space-x-4 bg-white p-4 rounded-lg shadow-md">
  <% if notification.item.user.avatar.attached? %>
    <%= image_tag url_for(notification.item.user.avatar), class: 'w-10 h-10 rounded-full' %>
  <% end %>
  <div class="flex-grow">
    <p class="text-gray-700">
      <span class="font-semibold text-gray-900"><%= notification.item.user.username %></span>
      added a new post:
    </p>
    <p class="mt-1 text-gray-600">
      <%= link_to notification.item.content.truncate(100), notification.item, class: "underline text-blue-600 hover:text-blue-800 font-medium" %>
    </p>
    <p class="text-sm text-gray-400 mt-1">
      <%= time_ago_in_words(notification.item.created_at) %> ago
    </p>
  </div>
  <% if notification.item.image.attached? %>
    <div class="flex-shrink-0">
      <%= image_tag url_for(notification.item.image), class: 'w-20 h-20 object-cover rounded-lg' %>
    </div>
  <% end %>
</div>