【Rails】ActiveStorageを用いて出力された画像のURLを使って画像リンクを作成したい

Question

目的概要

いつもお世話になっております。

実現したいこととして、アップロード(出力・表示)された画像(のリンク)をクリックすることで、元のサイズ画像が表示されるようにしたいです。

こちらやこちらの記事を参考に、アップロード後の画像のidやURLなどの情報を配列およびハッシュで取得、そして「link_to」と「image_tag」を使って画像リンクの雛形を作り、あとはパス(URL)だけ記述すれば完了というところまではできたのですが、取得したURLをそれぞれ画像に埋め込ませようというところで悪戦苦闘している状況です。

汚いコードで申し訳ございませんが、以下に該当ソースコードを添付いたします。

該当のソースコード

↓model

class Message < ApplicationRecord
  belongs_to :user
  has_one_attached :image

  validates :content, presence: true, unless: :was_attached?

  def was_attached?
    self.image.attached?
  end
end

↓controller

class MessagesController < ApplicationController
  def index
    @message = Message.new
    @messages = Message.all.order(created_at: "DESC")
    @image_urls = Message.all.with_attached_image
    @image_urls = @image_urls.map { |image_url| image_url.as_json.merge({ image_url: url_for(image_url.image) })}
    binding.pry
    # @image_urls = @image_urls.map {|image_url| image_url[:image_url]}
  end

  def create
    Message.create(message_params)
    redirect_to messages_path
  end

  private
  def message_params
    params.require(:message).permit(:message, :image).merge(user_id: current_user.id)
  end
end

↓view

  <div class="shared-area-wrapper">
    <div class="shared-area">
      <% @messages.each do |message| %>
        <div class="message-text-area">
          <div class="message-text-image">
            <div class="message-text">
              <%= message.message %>
            </div>
-------------------------画像出力コードはここから------------------------------------------------
            <div class="message-image-right">
              <%= link_to "#" do %>  ⇦「#」の部分に画像のパス(またはリンク)を入れる
                <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
              <% end %>
            </div>
-------------------------画像出力コードはここまで------------------------------------------------
          </div>
        </div>
        <div class="bottom-area">
          <div class="border-area-left">
            <p class="user-name">
              <%= "#{message.user.nickname}さんの投稿" %>
            </p>
          </div>
          <div class="border-area-right">
            <p class="ceated-at">
              <%= l message.created_at %>
            </p>
          </div>
        </div>
      <% end %>
    </div>
  </div>

試したこと

viewの「#」の部分には以下のコードそれぞれ入れて挙動確認するも、うまく表示されず...。

・ @image_urls.find(id: message.id)

・ @image_urls.find(id: message.id).fetch(:image_url)

・ @image_urls.find(id: message.id).image_url

・ @image_urls.find(id: message.id)[:image_url]

・ @image_urls.first(id: message.id)

ターミナルで確認すると、以下のように「#<Enumerator: ...>」と表示されたので、検索してこちらの記事を参考にさせていただいたのですが、何も分からず...。

[2] pry(#<MessagesController>)> @image_urls.find(id: 3)
=> #<Enumerator: ...>

解決策の分かる方がいらっしゃいましたら、どうかご教授いただけますと幸いです。
よろしくお願いいたします。

※もし他に必要なファイルや情報がございましたら、お申し付けください。

Answer 1

url_for(imageのURL)とするのが正しかったと思います。
なので以下のようだといかがでしょうか(if文とかは自身で書いていただきながら)。

<%= link_to url_for(message.image) do %>
  <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
<% end %>

Comments

[Kanade_JoinT]

>> hatsu様

お忙しい中、ご回答いただきまして誠にありがとうございます。
hatsu様からご教授いただきましたコードを記述したところ、無事に画像が表示されました。

今回ご教授いただけたコードの理解力を深め、今後に活かしたいと思います。
大変感謝いたします、ありがとうございました。