JSONのデータをRailsで取得して画像を表示させたい

Question

Spotify APIのgemであるRSpotifyを使って、アーティスト名を検索し、検索結果を表示させるものを実装しています。
以下のindex.html.erbの、<%=artist.name%>と同様にしてアーティストの画像も取得したいです。
どのように画像を表示すればいいでしょうか？？

class MusicsController < ApplicationController
  require 'rspotify'
  RSpotify.authenticate("  ", "  ")

  def search
  end

  def index
    @artists = RSpotify::Artist.search(params[:search])
  end
end

<h3>アーティスト名で検索</h3>

  <%= form_tag(controller:"musics",action:"index") do %>
    <%= text_field_tag :search %>
    <%= submit_tag 'Search',:name => nil %>
  <% end %>

<% @artists.each do |artist| %>
        <h4><%= artist.name %></h4>
<% end %>

ちなみに、<%=arsiti.images%>で表示してみると、以下のようになります。
これのurlを取得してimage_tagに引数として与えたいです。

[{"height"=>640, "url"=>"https://i.scdn.co/image/2a8c10fe954e2038fb74251cba601a5594cc5878", "width"=>640}, {"height"=>320, "url"=>"https://i.scdn.co/image/87d18c79bbfdb1905bb202d200e1c191afc46aa5", "width"=>320}, {"height"=>160, "url"=>"https://i.scdn.co/image/b4d024ebb4863438b92a1b029bff7f9737263a57", "width"=>160}]
[{"height"=>640, "url"=>"https://i.scdn.co/image/91330ce6df5635ffcf65f2d1e312f7585af6e2e4", "width"=>640}, {"height"=>300, "url"=>"https://i.scdn.co/image/717b5440157eeef9c7e910621e1754bc10b0a565", "width"=>300}, {"height"=>64, "url"=>"https://i.scdn.co/image/9dbc4d36937d01388ad522f3c3b7c1414089608e", "width"=>64}]
[{"height"=>640, "url"=>"https://i.scdn.co/image/60707b57e4f50c3506042528692f0d85f0f3a0c3", "width"=>640}, {"height"=>300, "url"=>"https://i.scdn.co/image/09ba248ec74bad1922095a11898f4cb2afebb226", "width"=>300}, {"height"=>64, "url"=>"https://i.scdn.co/image/cea55dfa69bda3eccf4d4163c2c1ffb93cead5d8", "width"=>64}]
[{"height"=>640, "url"=>"https://i.scdn.co/image/429bc8d84d6a41845a12946949b25e18a2ced4fd", "width"=>640}, {"height"=>300, "url"=>"https://i.scdn.co/image/babfb7cae54da34810119c5c1d92206bf32beb20", "width"=>300}, {"height"=>64, "url"=>"https://i.scdn.co/image/d7773b4c677f9ee5f9ec4e56c725a50fce47af33", "width"=>64}]

Answer 1

<% @artists.each do |artist| %>
  <h4><%= artist.name %></h4>
  <%image = artist.images[1]%>
  <%= image_tag(image["url"])%>
<% end %>

Rubyの配列とハッシュの取得方法を考えれると解決しました。

Answer 2

• リストビューファイルに

<%= image_tag('https://i.scdn.co/image/2a8c10fe954e2038fb74251cba601a5594cc5878') %>

と記載したところ、二人の男性が写った白黒の画像を表示できました。
情報はcontrollerから上手く渡してあげましょう。

# controller
def index
  @artists = RSpotify::Artist.search(params[:search])
  @url = 'https://i.scdn.co/image/2a8c10fe954e2038fb74251cba601a5594cc5878'
end

# index.html.erb
<% @artists.each do |artist| %>
  <h4><%= artist.name %></h4>
  <%= artist.images%>
<% end %>
<%= image_tag(@url) %>

とりあえず試験的にこれで表示することはできると思います。
あとはどうプログラムすればきれいに全部表示できるかを考えるとよいでしょう。

サイズなどのオプションについては、私はいつもこのサイトを頼りにしています。
Railsドキュメント

追記

# index.html.haml
<% @artists.each do |artist| %>
  <h4><%= artist.name %></h4>
  <%= artist.images.each do |image| %>
    <%= image_tag(image['url']) %>
  <% end %>
<% end %>

Comments

[Kassy11]

それでは一つの画像が複数表示されるだけなので、複数の検索結果についてのそれぞれのurlを画像表示させたいです。

[siruku6]

その質問に回答するためには情報が少なすぎるような気がします。

ソースコードの３つ目の情報は、いったい他のソースコードのどこでどうやって取得できるのでしょうか？

[Kassy11]

ソースコードの記載を変更させていただきました。

[siruku6]

確認させていただきました！

実際に動作させてみないと何とも言えないのですが、viewファイルを以下のように記載してみてはいかがでしょうか。

<% @artists.each do |artist| %>
<h4><%= artist.name %></h4>
<%= artist.images.each do |image| %>
<%= image_tag(image['url']) %>
<% end %>
<% end %>

画像が大きすぎてしまうかもしれませんが。

※インデントがなくなって見にくいので、回答の中に追記します。