CODEWITHSUNDEEP
ruby-on-railsrails-activestorageruby-on-rails-5.2
Steven Smith
Steven Smith

Reputation: 406

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

I am bit lost somewhere, as I have build gallery with active storage and it's fine and I am able to see images and upload the images

Here is a screenshot enter image description here

But one problem, as I try to create a new page for listing page, I am trying to get images on thumb page

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

it should be fine as long it shows a text-based of images see screenshot below

enter image description here

So I need to change these images as I am using the same method as the first screenshot, as the code below

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

so I copied 

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

this to new listing pages stuff

so I modify the listing page

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

and all I got an error enter image description here

even I have tried this 

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

and I get same error, Any suggest would be great

Upvotes: 0

Views: 1032

Answers (2)

nzajt
nzajt

Reputation: 1985

In your model you have has_many_attached :images

tool.images regardless the number of images will alway return an ActiveSTorage::Attached::Many which is an Enumerable so you will have to loop through it to get each image, in the loop each image will be an ActiveStorage::Blob, to use image_tag you will need a url for the image, to get the url from the blob you would use url_for(image).

Here is an example:

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

In your case you wanted the image to be a link, that is easy to do as well you just have to pass the correct information to link_to. You can do this in multiple ways this is the way I think is the easiest to read.

With a link: 

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

Upvotes: 1

Veridian Dynamics
Veridian Dynamics

Reputation: 1406

This is the API for link_to:

link_to name, options = {}, html_options = nil

This is the API for image_tag:

image_tag source, options={}

Lastly, you're seeing this error:

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

You are getting this error because you're try to create an image tag with a single image not a collection of "many".

Look at your original working code (superfluous HTML stripped away):

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

Notice how you are looping through all the images? That is because a @tool has many images. It is an array of images. Inside the link_to block, you're defining an image_tag properly with a single image as the reference. Now lets look at your erroneous code:

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

This is weird. You're calling this:

<%= tool.images %>

Which just displays an instance of #<ActiveStorage::Attached::Many> and you're calling this:

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

Which just attempts (and fails) to link an array of images to a single image_tag instance which we know is invalid thanks to the api. You likely want to do this:

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

Upvotes: 1

Related Questions