前提・実現したいこと
Rails初心者です。
現在Active Storageを使ってユーザー画像を表示させているのですが、jqueryの非同期通信で行うと画像が表示されません。
どなたかわかる方がいらっしゃいましたら、ご回答いただけると非常に助かります。
発生している問題・エラーメッセージ
jqueryの非同期通信で、Active storageの画像を読み込むと下記の現象が起きる <img style="width:100px; height:100px;" src="#{[object Object]}">
message.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'); }) }) });
create.json.jbuilder
json.content @message.content json.avatar @message.user.avatar json.user_name @message.user.name json.date @message.created_at.strftime("%Y/%m/%d %H:%M") json.id @message.id
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
補足情報(FW/ツールのバージョンなど)
Ruby version 2.5.1
Rails version 5.2.3
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/31 23:53