Active Storage 上的图像未显示在 ERB 页面上，但显示另一个 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 %>

这个到新的列表页面的东西

所以我修改了列表页面

<% @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 %>

工具.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

在您的模型中，您有 has_many_attached :images

tool.images 不管图像的数量总是返回一个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_to。您可以通过多种方式执行此操作，这是我认为最容易阅读的方式。

有链接：

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

Answer 2

这是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>

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

查看您的原始工作代码（去掉了多余的 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 %>

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

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