Trouble displaying individual images from array (Rails active storage)

Question

I'm sure this should be simple and I'm overlooking something daft.

Rails 6.1.1 Ruby 3.0.0

I'm using active storage to attach multiple 'photos' to my Articles model.

In Articles 'show.html.erb' I want to place the photos in a number of different places in the article, not looping all of them in a row in the same place.

show.html.erb

<% @first2photos.each do |article| %>
    <%= image_tag(article.photos) %>
  <% end %>

articles.controller.erb

  def show
    @first2photos = Article.order("created_at DESC").first(2)
  end

This gives the following error: Can't resolve image into URL: undefined method `to_model' for #<ActiveStorage::Attached::Many:0x00007fdbbfa852a8 @name="photos", @record=#<Article id: 1, title: "This is the first post", snippet: "Hopefully this will also attach a couple of photos", body: "Nullam ac odio eget mauris accumsan malesuada. Nul...", created_at: "2021-01-30 20:50:31.766713000 +0000", updated_at: "2021-01-30 21:04:09.424224000 +0000">> Did you mean? to_yaml

If I loop on 'photo's with:

<% @first2photos.each do |photos| %>
    <%= image_tag(@article.photos) %>
  <% end %>

I still get the following error:

Can't resolve image into URL: undefined method `to_model'...

Changing that to:

<% @first2photos.each do |photos| %>
    <%= image_tag(photos) %>
  <% end %>

The page now loads, but shows a broken image icon, with no error. Checking the log in Terminal, I'm not sure I can see where it's attempting to access the photo.

Started GET "/articles/1" for ::1 at 2021-01-31 20:56:58 +0000
Processing by ArticlesController#show as HTML
  Parameters: {"id"=>"1"}
  Article Load (2.9ms)  SELECT "articles".* FROM "articles" WHERE "articles"."id" = $1 LIMIT $2  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/articles_controller.rb:64:in `set_article'
  Article Load (1.4ms)  SELECT "articles".* FROM "articles" ORDER BY created_at DESC LIMIT $1  [["LIMIT", 2]]
  ↳ app/controllers/articles_controller.rb:11:in `show'
  Rendering layout layouts/application.html.erb
  Rendering articles/show.html.erb within layouts/application
  Rendered articles/show.html.erb within layouts/application (Duration: 0.4ms | Allocations: 155)
[Webpacker] Everything's up-to-date. Nothing to do
  Rendered layout layouts/application.html.erb (Duration: 8.6ms | Allocations: 4208)
Completed 200 OK in 20ms (Views: 9.3ms | ActiveRecord: 4.4ms | Allocations: 6022)

You have mutiple photos in your association, you have to iterate over those and then use image_tag for each photo (not one image_tag for all photos) — arieljuod
– arieljuod, Commented Jan 31, 2021 at 15:37
Thanks, isn't '<% @first2photos.each do |article| %>' looping over the multiple images? — Simon Cooper
– Simon Cooper, Commented Jan 31, 2021 at 18:28
That's looping through the articles (you have there each do |article|), you need a article.photos.each do |photo| inside the first loop — arieljuod
– arieljuod, Commented Jan 31, 2021 at 20:34
Thanks, @arieljuod. Still not getting this. Updated OP with some more details. — Simon Cooper
– Simon Cooper, Commented Jan 31, 2021 at 20:58

arieljuod · Accepted Answer · 2021-01-31 21:03:38Z

1

You need to loop over the photos collection to use image_tag for each photo.

<% @first2photos.each do |article| %>
  <% article.photos.each do |photo|
    <%= image_tag(photo) %>
  <% end %>
<% end %>

If you want to show only one image per article then:

<% @first2photos.each do |article| %>
  <%= image_tag(article.photos.first) %>
<% end %>

I would change the name first2photos to first2articles to make it less confusing too.

answered Jan 31, 2021 at 21:03

arieljuod

15.9k2 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trouble displaying individual images from array (Rails active storage)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related