Action cable を用いて画像を表示したい

ActioncableとActivestrageで画像を表示したい

Actioncable で画像を表示しようとしたところ、文字は表示されるのですが
画像はundifindedと表示されてしまう状況です。

発生している問題・エラーメッセージ

(文字列) undifinded

該当のソースコード

javascript
1channel.js
2import consumer from "./consumer"
3
4consumer.subscriptions.create("ItemChannel", {
5  connected() {
6    // Called when the subscription is ready for use on the server
7  },
8
9  disconnected() {
10    // Called when the subscription has been terminated by the server
11  },
12
13  received(data) {
14    console.log(data)
15    const html = `
16    <div class="d-flex flex-wrap">
17    <div>${data.content.name}</div>
18    <div><%= image_tag ${data.content.image} %></div>
19    <div>${data.content.store}</div>
20    </div>`;
21    const messages = document.getElementById('items');
22    const newMessage = document.getElementById('item_name');
23    const newImage = document.getElementById('item_image');
24    const newStore = document.getElementById('item_store')
25    messages.insertAdjacentHTML('afterbegin', html);
26    newMessage.value='';
27    newImage.value='';
28    newStore.value=''
29  }
30});
31

ruby
1<div id='items'>
2
3      <div class="place-wrapper ">
4        <% @items.each do |item|%>
5          <div class="place-item">
6            <%= link_to place_item_path(item.id)do%>
7              <div class="h4 text-dark">
8                <%= item.name %>
9              </div>
10              <%= image_tag item.image.variant(resize:'250x250')%>
11            <% end %>
12          </div>
13        <% end %>
14      </div>
15</div>

ruby
1controller.rb
2
3  def create
4    @place = Place.find(params[:place_id])
5    @item = Item.new(item_params)
6    ActionCable.server.broadcast 'item_channel', content: @item if @item.save
7  end
8
9  private
10
11  def item_params
12    params.permit(:name, :image, :place_id, :store).merge(user_id: current_user.id, place_id: params[:place_id])
13  end

試したこと

channel.js で
<%= image_tag ${data.content.image} %>の部分を
<img src="${data.content.image}"%>
としましたが変化なしでした。
画面をリロードすることによって画像を表示することはできます。
よろしくお願いいたします。
おそらくですが、画像のURLを取り出すことができたら解決しますので
取り出し方をご教授いただけないでしょうか？
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

使用Gem
mini_magick
image_processing, '~> 1.2'

kuma_kuma_

2020/10/05 08:56 編集

<div><%= image_tag ${data.content.image} %></div> ここを一度下記の様にしてURLを確認 <div>${data.content.image}</div> で大丈夫なら下の書き方を試して <div><img src="${data.content.image}" ></div>

n0918k3

2020/10/05 09:05

ご教授ありがとうございます。アドバイスいただいた内容で解決できませんでした。コンソールの画像を添付致しますので、お手数おかけして大変申し訳ないのですがご教授いただけますでしょうか？よろしくお願いいたします。

kuma_kuma_

2020/10/05 09:15 編集

いやコンソールじゃなくって、実行した結果の方を確認してください。 <div>${data.content.image}</div> と書き直した時点で「data.content.image」に思っているURLが指定されているかの確認だから... 追記 data.contentにimageってないよね？追記2 data.content.nameはどうやって設定していますか？それと同じときに同じようにdata.content.imageに画像URLの指定をされてはいかがですか？

n0918k3

2020/10/05 09:34 編集

<div>${data.content.image}</div>の結果はundifindedとなっておりました。 <div><img src="${data.content.image}" ></div>では画像のリンク切れが起きている状況です。 data.contentにimageがないというのはcontentにimageカラムがないという認識でよろしいでしょうか？ contentとはhas_one_attached :imageで画像を添付している状態です。

n0918k3

2020/10/05 09:47 編集

data.content.nameは簡潔に申し上げますと　data.content.name　= @item.name controller.rb　にて ActionCable.server.broadcast 'item_channel', content: @item if @item.save の記述でcontent = @itemとして date.contentに.nameを足すことでnameを取り出しております。画像のURLの取り出し方が分からないので教えていただけますでしょうか？

kuma_kuma_

2020/10/05 09:51

>data.contentにimageがないというのはcontentにimageカラムがないという認識でよろしいでしょうか？そうですね。 > contentとはhas_one_attached :imageで画像を添付している状態です。そのような記載がここに提示されているソースにはありませんでした。一応別に書かれている可能性も考えURLの表示をお願いした次第です。 https://qiita.com/hmmrjn/items/7cc5e5348755c517458a https://railsguides.jp/active_storage_overview.html has_one_attachedに関しては上記URLが参考になりかと思います。スペルミス等確認され先の状態で正しくURLが取得できるか確認してください。

n0918k3

2020/10/05 10:09

ありがとうございます。参考にさせていただきます。