スクレイピングした画像の情報を画像で表示したい

Question

スクレイピングした画像の情報を得て、それをブラウザで画像として表示させたのですがどうしたらいいでしょうか？
確かに、画像の情報は得ることができたのですが、それをviewを通してブラウザ上で表示させるやり方がわかりません。
ブラウザではこのように（https://rr.img.naver.jp/mig?src=http%3A%2F%2Fimgcc.naver.jp%2Fkaze%2Fmission%2FUSER%2F20170612%2F75%2F7720595%2F17%2F256x256x4d8de341c5dbec486ff4fd34.jpg&twidth=60&theight=60&qlt=80&res_format=jpg&op=sc）文字で出力されます。

コントローラー

class HomeController < ApplicationController
  def top
      require "open-uri"
      require "nokogiri"
      
      url = "http://〜〜〜〜〜〜"
      
      user_agent = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.63 Safari/537.36'
      charset = nil
      html = open(url, "User-Agent" => user_agent) do |f|
        charset = f.charset
        f.read
      end
            
      doc = Nokogiri::HTML.parse(html, nil, charset)
      

     doc.xpath('//li[@class="mdTopMTMList01Item"]').each do |node|
        # imgに関する情報が帰ってくる
        @titles= node.css('img')
      end
  end
end

ビュー

<% @titles.each do |title| %>
     <div>
          <%= title.attribute('src').value %>
      </div>
<% end %>   

ビューをこのように変えればいいのかと思いやって見ましたがどうやら違うようでした。

 
<% @titles.each do |title| %>
     <div>
          <a herf="<%= title.attribute('src').value %>"></a>
      </div>
<% end %>   

どのようにしたら画像が表示されるのか教えてください

Answer 1

何が分からないのかイマイチ分かりませんが（汗

ビューを見ると単純にタグを間違えてるだけではないでしょうか？

画像をブラウザに表示させるのはimgタグです。
aタグはリンクするタグなのですが上のソースだとリンクさせる対象がありません。

<a href="リンク先">（ここにリンクさせる文字や画像を入れる）</a>

画像を表示させたいなら

<img src="表示させたい画像のURL">

aタグとimgタグを調べてみて下さい

私が根本的に質問を勘違いしてるならごめんなさい

Comments

[renren643]

回答ありがとうございます。ビューを以下のようにしたらできました。
おっしゃる通り単純にaタグとimgタグを勘違いしていただけでした。
<% @titles.each do |title| %>
<div>
<img src="<%= title.attribute('src').value %>">
</div>
<% end %>
また、この書き方だと、
[画像]
[画像]
[画像]
.
.
.
[画像]
と表示されなく、ブラウザを更新するたびに画像が切り替わっていくという感じになってしまいます。
each文に代入される画像を一覧としてブラウザ上に表示するにはどうしたらいいのでしょうか？