質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

860閲覧

Active Storageの画像が表示されなく困っています

rui-watanabe

総合スコア18

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2019/08/27 11:09

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

@message.user.avatar はRails側で解釈できるActiveStorageオブジェクトであるため、そのままJSに渡しても意図通りの処理はできません。
{[object Object]}と出ているように、JSでは単なるオブジェクトとして扱われます。

Rails側でurl_forを使ってURLに変換できますので、変換されたURLをJSに渡してあげればよいと思います。

「5.ファイルをリンクする」の箇所です。
https://railsguides.jp/active_storage_overview.html

投稿2019/08/31 17:19

8zca

総合スコア559

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rui-watanabe

2019/08/31 23:53

ご指摘通り修正したら無事表示されました! 3日ぐらい詰まっていたので非常に助かりました!! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問