RailsのActionCableを使った双方向の非同期通信でActiveStorageでUserに紐づいているアイコン画像を表示させたい

前提・実現したいこと

Rails6.0でチャットアプリを開発しています。
RailsのActionCableで双方向の非同期通信を実装している最中なのですが、ActiveStorageでUserに紐づいているアイコン画像を表示させたいです。

ビューファイルでは読み込めているのでリロードすると表示はされます。

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

↑現状

この時検証ツールで確認するとこのようなエラーが出ています
（ページをリロードするとエラーは出ず画像は正常に表示されます）

404 (Not Found)

該当のソースコード

【Rails6】（送信時のリロード無し！）Action CableでSlack風チャットアプリを作成
↑を参考に実装しています

javascript
1
2import consumer from "./consumer"
3
4document.addEventListener('turbolinks:load', () => {
5
6    window.messageContainer = document.getElementById('message-container')
7    window.addMessage = document.getElementById('add-message')
8    if (messageContainer === null) {
9        return
10    }
11
12    consumer.subscriptions.create("RoomChannel", {
13        connected() {
14        },
15
16        disconnected() {
17        },
18
19        received(data) {
20            addMessage.insertAdjacentHTML('beforeend',  data['message'])
21        },
22    })
23    const documentElement = document.getElementById('scroll-message')
24    window.messageContent = document.getElementById('message_content')
25    window.scrollToBottom = () => {
26      documentElement.scrollTop = documentElement.scrollHeight;
27    };
28    scrollToBottom()
29})

ruby
1class RoomChannel < ApplicationCable::Channel
2  def subscribed
3    stream_from "room_channel"
4  end
5
6  def unsubscribed
7    # Any cleanup needed when channel is unsubscribed
8  end
9end

ruby
1class Message < ApplicationRecord
2  belongs_to :user
3  belongs_to :room
4  has_one_attached :image
5
6  validates :content, presence: true, unless: :was_attached?
7
8  def was_attached?
9    self.image.attached?
10  end
11  def template
12    ApplicationController.renderer.render partial: 'rooms/message', locals: { message: self }
13  end
14end

ruby
1class MessagesController < ApplicationController
2  def create
3    @room = RoomUser.find_by(user_id: current_user.id)
4    @message = Message.create!(params.require(:message).permit(:content, :image).merge(room_id: @room.room_id, user_id: current_user.id))
5    ActionCable.server.broadcast 'room_channel', message: @message.template
6  end
7end
8

ruby
1class User < ApplicationRecord
2  # Include default devise modules. Others available are:
3  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
4  devise :database_authenticatable, :registerable,
5         :recoverable, :rememberable, :validatable
6
7    has_many :room_users
8    has_many :rooms, through: :room_users
9    has_many :messages
10    has_one_attached :icon
11
12    validates :name, presence: true
13end

html
1        <% @messages.each do |message| %>
2        <div id="message-container">
3          <%= render partial: 'message',locals: { message: message }%>
4        </div>
5        <% end %>
6        <div id="add-message">
7        </div>
8      </div>
9    </div>
10    <%= form_with model: [@room, @message], class:"message-form" do |f| %>
11      <%= f.text_field :content, class:"message-field", placeholder:"Message", autofocus: true %>
12      <label class="input-image">
13      <%= f.file_field :image, class: "upload-file" %>
14      </label>
15      <%= f.submit "", class:"send", id:"send" %>
16    <% end %>
17  </div>
18</div>

試したこと

ActionCableを用いたリアルタイムチャットでユーザーアイコンを表示させたい
↑のサイトを参考にreceived（data）{}の中にHTML書き込みフロントに返す記述に変更することで画像の表示はできましたが、document.getElementById('id')で画像の取得をしているためかメッセージの送信者の登録したアイコン画像ではなく別ユーザーの登録したアイコン画像が表示されます。