コメント機能非同期通信にて、ユーザー画像を表示させたいがリンク切れとなってしまう。

前提・実現したいこと

コメント機能の実装をしています。
コメント自体の非同期通信の設定は完了しているのですが、
コメントをした際にコメントをしたユーザーのavatar画像を同時に表示させたいのですが、
画像がリンク切れとなってしまいます。

画像のようになっています。

https://gyazo.com/78b1cf4c16f1943b34261b63324f6f2f

ActiveRecordを用いてuser.avatarを登録しています。
画像をurl化しなければいけないかと思うのですが方法がわかりません・・・。

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

console
1
2%7Bundefined%7D:1 Failed to load resource: the server responded with a status of 404 (Not Found)
3

該当のソースコード

html
1
2
3      <div class="comments-all">
4        <ul id="comments">
5          <% if @comments.present? %>
6            <% @comments.reverse_each do |comment| %>
7              <div class='comment-context'>
8                <li>
9                <% if current_user.avatar.attached? %>
10          <%= image_tag(@post.user.avatar, class:"avatar-post") %>  
11        <% end %>  
12                <%= link_to comment.user.name, user_path(comment.user.id) %> ： <%= comment.text %></li>
13              </div>
14            <% end %>
15          <% else %>
16            <div class="comment-do">
17              NO COMMENT YET
18            </div>
19          <% end %>
20        </ul>
21      </div>

channel
1consumer.subscriptions.create("CommentChannel", {
2  connected() {
3    // Called when the subscription is ready for use on the server
4  },
5
6  disconnected() {
7    // Called when the subscription has been terminated by the server
8  },
9
10  received(data) {
11    const html = `
12    <div class='comment-context'>
13              <li>
14          <img src={${data.user.avatar}} class="avatar-post" ></img>  
15        <a href="user_path${data.user.id}">${data.user.name}</a>：  ${data.content.text}</li>
16              </div>`
17
18    const comments = document.getElementById('comments');
19    const newComment = document.getElementById('comment_text');
20    comments.insertAdjacentHTML('afterbegin', html);
21    newComment.value='';
22  }
23});
24

試したこと

url_forを使用したのですがリンク切れは治りませんでした。

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

'rails', '~> 6.0.0'
'mysql2', '>= 0.5.3'
channelを用いての実装です。

行動規範の内容に同意します

回答1件

せっかくRailsを使っているなら標準機能のremote: trueを利用して非同期通信を行えば簡単に実装できます。
サンプルコード(Railsガイド)のreceive部分がjs.erbファイルなのでimage_urlも使いやすいです。

app/views/users/create.js.erbビューファイルを作成します。実際のJavaScriptはこのビューで生成され、クライアントに送信されてそこで実行されます。

$("<%= escape_javascript(render @user) %>").appendTo("#users");

投稿2020/11/13 10:01