ActionCableを用いて画像を送信する

前提・実現したいこと

現在chatアプリを作成しています。
ActionCableを用いてチャットのテキストの内容、送信者の名前、作成時間の3つは非同期で送れるようになりました。
画像自体は送れていそうなのですがリロードしないと画像が表示できない状態です。

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

エラーは出ていないのですが、送ったあとのブラウザの状態とリロードしたあとの画像を載せさせていただきます。
リロード前
https://gyazo.com/8337019a55c7d9beec25f3bb8500e38e
リロード後
https://gyazo.com/ed81a555e997ce2c8f4952bc0a55b2c4

該当のソースコード

view
1<div class="message" id="message">
2  <div class="upper-message">
3    <div class="message-user">  
4      <!-- 投稿したユーザー名情報を出力する -->
5       <%= message.user.name%>
6    </div>
7    <div class="message-date"> 
8      <!-- 投稿した時刻を出力する -->
9       <%=l message.created_at%> 
10     </div> 
11  </div>
12  <div class="lower-message">
13    <div class="message-content">
14      <!-- 投稿したメッセージ内容を記述する -->
15      <%= message.content %>
16    </div>
17     <%= image_tag message.image.variant(resize: '500x500'), class: 'message-image' if message.image.attached? %> 
18  </div>
19</div>

message_channel.js

import consumer from "./consumer"
// import {formatToTimeZone} from 'date-fns-timezone';

consumer.subscriptions.create("MessageChannel", {
  connected() {
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    // const FORMAT = 'YYYY-MM-DD HH:mm:ss';
    // const TIME_ZONE_TOKYO = 'Asia/Tokyo';
    // const now = new Date();
    const japanStandardTime = new Date().toLocaleString({ timeZone: 'Asia/Tokyo' });
    const html = `
    <div class="message">
      <div class="upper-message">
        <div class="message-user">
          ${data.user.name}
        </div>
        <div class="message-date">
          ${japanStandardTime}
        </div>
      </div>
      <div class="lower-message">
        <div class="message-content">
          ${data.content.content}
        </div>
        <img src="${data.image}">
      </div>
    </div>`;
    const messages = document.getElementById('messages');
    const newMessage = document.getElementById('message_content');
    const newImage = document.getElementById('message_image');
    messages.insertAdjacentHTML('beforeend', html);
    newMessage.value='';
    newImage.value='';
  }
});

messages_controller.rb

class MessagesController < ApplicationController

  def index
    @message = Message.new
    @room = Room.find(params[:room_id])
    @messages = @room.messages.includes(:user)
  end

  def create
    @room = Room.find(params[:room_id])
    @message = @room.messages.new(message_params)
    if @message.save
      ActionCable.server.broadcast 'message_channel', content: @message, user: @message.user, image: @message.image
      # redirect_to room_messages_path(@room)
    else
      @messages = @room.messages.includes(:user)
      render :index
    end
  end

  private

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

message_channel.rb

class MessageChannel < ApplicationCable::Channel
  def subscribed
     stream_from "message_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end