jqueryの非同期通信で画像が表示されません

Question

前提・実現したいこと

Rails初心者です。

現在Railsアプリケーションを作成しており、jQueryの非同期通信でメッセージ機能を実装しているのですが、画像だけが表示されません。

わかる方がいらっしゃったら、ご回答いただけると非常に助かります。

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

jqueryの非同期通信で画像が表示されない

messges.js

$(function(){
  function buildMessage(message){
    var html =  `<div class="chat-box">
                  <div class="chat-face">
                  <img style="width:100px; height:100px;" src= "${message.avatar}"></div>
                  <div class="chat-hukidashi">
                        <strong>${message.content}</strong>
                        <br>${message.date}
                  </div>
                  </div>
                  </div>`
    return html;
  }
  $("#new_message").on("submit", function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: "json",
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildMessage(data);
      $('.chat').append(html)
      $('html,body').animate({scrollTop: $('.chats')[0].scrollHeight}, 'fast');
      $("form")[0].reset();
    })
    .fail(function(){
    alert('error');
    })
  })
});

messages/create.json.jbuilder

json.content @message.content
json.avatar @message.user.avatar
json.date @message.created_at.strftime("%Y/%m/%d %H:%M")

messages_controller

class MessagesController < ApplicationController

  before_action :authenticate_user!, only: [:create]
  
  def create
    if Entry.where(user_id: current_user.id, room_id: params[:message][:room_id]).present?
      @message = Message.create(params.require(:message).permit(:user_id, :content, :room_id).merge(user_id: current_user.id))
      respond_to do |format|
        format.html { redirect_to "/rooms/#{@message.room_id}"}
        format.json
    end
    else
      @messages = messages.includes(:user)
      flash.now[:alert] = "メッセージを入力してください。"
      render template: "room/new"
    end
  end
end

モデル

user.ub

  has_many :messages, dependent: :destroy

message.rb

  belongs_to :user

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

Ruby version 2.5.1
Rails version 5.2.3

create.json.jbuilderをbinding.pryし、@message.user.avatarの値を確認したら以下のような値がとれます。

=> <ActiveStorage::Attached::One:0x00007f8fc98e3018
@dependent=:purge_later,
@name="avatar",
@record=
<User id: 8, email: "[e-mail]", name: "te", profile: "11111111", status: "released", created_at: "2019-08-29 10:24:33", updated_at: "2019-08-29 10:24:33">>

Answer 1

active storageの指定の仕方が間違っていました。
url_for(@message.user.avatar)で解決しました

Answer 2

submitを止めるにはpreventDefault()ではなくreturn falseが必要だったと思います。読み込み直されているだけなのでは？

Comments

[rui-watanabe]

return falseに記述を変えても同じ動作のままでした。
create.json.jbuilderをbinding.pryでデバックし、@message.user.avatarで値を確認すると以下のようなものがとれます。

=> #<ActiveStorage::Attached::One:0x00007f8fc98e3018
@dependent=:purge_later,
@name="avatar",
@record=
#<User id: 8, email: "[e-mail]", name: "te", profile: "11111111", status: "released", created_at: "2019-08-29 10:24:33", updated_at: "2019-08-29 10:24:33">>

おそらくactive storageでの取り出し方に問題があるのではないかと思っているのですが、もし解決方法が分かりましたらご回答いただけると非常に助かります。

[moredeep]

タイトルから、JQueryの非同期実行後の問題かと思っていました。
多分、"タイトル"と"発生している問題"は変えたほうがいいです。

avatarの値が意図したものと違うという意味で合っていますか？
そのavatarという値ですが、いきなりjbuilderで出てくるので、何を表現するものなのかが不明です。↑のデータがavatarだというなら、userはどんなデータなんでしょうか？データ構造はどのようになっているのでしょうか？本来avatarはどのようなデータなんでしょうか？
それらが明示されれば正しい回答が付くかもしれません。
どちらにせよ、私はruby on railsにはそんなに詳しくないので、余りお役に立てないかもしれないです。。

[rui-watanabe]

ご回答いただきありがとうございました。
自己解決いたしました。
ご指摘いただいた通り、次回からの質問で参考にさせていただきます。