ERB 页面上不显示 Active Storage 上的图像，但显示另一个 ERB 页面

Question

我有点迷路了，因为我已经构建了带有活动存储的画廊，这很好，我能够看到图像并上传图像

这是截图

但是有一个问题，当我尝试为列表页面创建一个新页面时，我试图在缩略图页面上获取图像

    <div class="row">
  <div class="col-md-3">
    <ul class="sidebar-list">
      <li class="sidebar-item"><%= link_to "Your tools Listings", tools_path, class: "sidebar-link active" %></li>

    </ul>
  </div>
  <div class="col-md-9">
    <div class="panel panel-default">
      <div class="panel-heading">
        Listings
      </div>
      <div class="panel-body">
        <% @tools.each do |tool| %>
          <div class="row">
            <div class="col-md-2">
                <%= tool.images %>
            </div>
            <div class="col-md-7">
              <h4><%= tool.listing_name %></h4>
            </div>
            <div class="col-md-3 right">
              <%= link_to "Update", listing_tool_path(tool), class: "btn btn-black-free-account" %>
            </div>
          </div>
          <hr/>
        <% end %>
      </div>
    </div>
  </div>
</div>

只要显示基于文本的图像就可以了，请参见下面的屏幕截图

所以我需要更改这些图像，因为我使用与第一个屏幕截图相同的方法，如下面的代码

<% if @tool.images.attached? %>

<div class="panel panel-default">
    <div class="panel-heading">
        Photo Display
    </div>
    <br>
    <div class="row">
        <% @tool.images.each do |image| %>
        <div class="col-md-4">
            <div class="panel panel-default tools-gallery-panel">
                <div class="panel-heading preview ">
                    <%= link_to image_tag(image, class:"img-thumbnail tools-gallery"), image %>
                </div>
                <div class="panel-body">
                    <span class="pull-right">
                        <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
                       <%= link_to "Remove", delete_image_attachment_tool_path(image), method: :delete, data: {confirm: "Are you sure?"} %>
                    </span>
                </div>
            </div>
        </div>
        <% end %>
        <% end %>

    </div>

所以我复制了

 <%= link_to image_tag(image, class:"img-thumbnail tools-gallery"), image %>

这是新列表页面的东西

所以我修改listing页面

<% @tools.each do |tool| %>
  <div class="row">
    <div class="col-md-2">
        <%= tool.images %>
          <%= link_to image_tag(tool.images, class:"thumbnail"), images %>
    </div>
    <div class="col-md-7">
      <h4><%= tool.listing_name %></h4>
    </div>
    <div class="col-md-3 right">
      <%= link_to "Update", listing_tool_path(tool), class: "btn btn-black-free-account" %>
    </div>
  </div>
  <hr/>
<% end %>

我得到了一个错误

我也试过这个

  <%= link_to image_tag(tool, class:"thumbnail"), images %>

Tool.rb

class Tool < ApplicationRecord
  belongs_to :user

  has_many_attached :images

  validates :tool_type, presence: true
  validates :power_type, presence: true
  validates :accessories, presence: true
  validates :brand, presence: true
  validates :price, presence: true


end

我得到同样的错误，任何建议都很好

Answer 1

这是 link_to 的 API:

link_to name, options = {}, html_options = nil

这是 image_tag 的 API:

image_tag source, options={}

最后，您看到了这个错误：

Can't resolve image into URL: undefined `to_model` for #<ActiveStorage::Attached::Many>

您收到此错误是因为您尝试使用单个图像而不是 "many" 的集合创建图像标签。

看看你原来的工作代码（多余的HTML被剥离）：

 <% @tool.images.each do |image| %>
   <%= link_to image_tag(image, class:"img-thumbnail tools-gallery"), image %>
 <% end %>

注意你是如何循环浏览所有图像的吗？那是因为 @tool 有很多图像。它是一组图像。在 link_to 块内，您使用单个图像作为参考正确定义了 image_tag。现在让我们看看你的错误代码：

<% @tools.each do |tool| %>
  <%= tool.images %>
  <%= image_tag(tool.images, class:"thumbnail"), images %>
<% end %>

这很奇怪。你是这样称呼的：

<%= tool.images %>

它只显示 #<ActiveStorage::Attached::Many> 的一个实例，而您正在调用它：

<%= link_to image_tag(tool.images, class:"thumbnail"), images %>

它只是尝试（但失败了）link 图像数组到单个 image_tag 实例，由于 api，我们知道它是无效的。您可能想要这样做：

<% @tools.each do |tool| %>
   <%= tool.images.each |image| %>
     <%= image_tag(image, class:"thumbnail"), image %>
   <% end %>
 <% end %>

Answer 2

在你的模型中你有 has_many_attached :images

tool.images 不管图像的数量总是 return 一个 ActiveSTorage::Attached::Many 这是一个 Enumerable 所以你必须循环遍历它以获得每个 image，在循环中，每个图像都是一个 ActiveStorage::Blob，要使用 image_tag，您需要一个 url 作为图像，以便从 blob 中获取 url使用 url_for(image)。

这是一个例子：

<% tool.images.each do |image| %>
  <%= image_tag(url_for(image), class: 'some-class') %>
<% end %>

在您的情况下，您希望图像是 link，这也很容易做到，您只需将正确的信息传递给 link_to。您可以通过多种方式执行此操作，这是我认为最容易阅读的方式。

与 link:

<% tool.images.each do |image| %>
  <%= link_to "Path to Tool as string" do %>
    <%= image_tag(url_for(image), class: 'some-class') %>
  <% end %>
<% end %>

ERB 页面上不显示 Active Storage 上的图像，但显示另一个 ERB 页面

Images on Active Storage not displayed on the ERB page but another ERB page are displayed

ruby-on-rails

rails-activestorage

ruby-on-rails-5.2