###実現したいこと
- JavaScriptのAjaxを使い、非同期通信でチャット風UIでつぶやけるようにしたい
- ローカル環境ではそれが実現したものの、Herokuにデプロイしたところ、画像が表示されなくなってしまった
###使用しているバージョン等
- Rails 6.0.3.4
- ruby 2.6.5
- heroku/7.47.11 darwin-x64 node-v12.16.2
###起きているエラー
###### ローカル環境
###### 本番環境
（補足）ビューが崩れてしまったり見づらいところは機能ができてから直そうと思っているためご容赦ください。
###現在のコード
JavaScript
1function post() {
2 const submit = document.getElementById("submit_message");
3 submit.addEventListener("click", (e) => {
4 const formData = new FormData(document.getElementById("self_compassion"));
5 const XHR = new XMLHttpRequest();
6 XHR.open("POST", "/troubles", true);
7 XHR.responseType = "json";
8 XHR.send(formData);
9 XHR.onload = () => {
10 if (XHR.status != 200) {
11 alert(`Error ${XHR.status}: ${XHR.statusText}`);
12 return null;
13 }
14 const item = XHR.response.trouble;
15 const list = document.getElementById("list_messages");
16 const formText = document.getElementById("content_worry");
17 if(document.querySelector("#trouble_message_type_trouble").checked) {
18 const HTML_trouble= `
19 <li class="message-left-side">
20 <div class="pic-chat">
21 <img src="/assets/sad.png" alt="落ち込んでいる画像"> ⭐️この部分が反映されない
22 </div>
23 <div class="text-chat">
24 <div class="post-content">
25 ${item.worry}
26 </div>
27 <div class="post-date">
28 投稿日時：${item.created_at.slice(0,19)}
29 </div>
30 </li>`;
31 list.insertAdjacentHTML("afterend", HTML_trouble);
32 formText.value = "";
33 return false;
34 } else (document.querySelector("#trouble_message_type_encouragement").checked)
35 const HTML_encouragement= `
36 <li class="message-right-side">
37 <div class="pic-chat">
38 <img src="/assets/kind.png" alt="励ましている画像"> ⭐️この部分が反映されない
39 </div>
40 <div class="text-chat">
41 <div class="post-content">
42 ${item.worry}
43 </div>
44 <div class="post-date">
45 投稿日時：${item.created_at.slice(0,19)}
46 </div>
47 </li>`;
48 list.insertAdjacentHTML("afterend", HTML_encouragement);
49 formText.value = "";
50 return false;
51 };
52 e.preventDefault();
53 });
54}
55window.addEventListener('load', post);
html
1<div class="form-area">
2 <div class="form-chat">
3 <form id="self_compassion" action="/troubles" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="r0VMxMZxkiq+BUDCMY7pqDHV45CkWwOzimlzSFirCGcH8sa3+Z2GELg74+UpRfe60RPX9/GE6yeEHnXAeI5+Sg==" />
4 <label for="trouble_trouble">悩みをつぶやく</label>
5 <input type="radio" value="trouble" checked="checked" name="trouble[message_type]" id="trouble_message_type_trouble" />
6 <label for="trouble_encouragement">励ましの言葉をかける</label>
7 <input type="radio" value="encouragement" name="trouble[message_type]" id="trouble_message_type_encouragement" />
8 <input id="content_worry" placeholder="メッセージを入力" type="text" name="trouble[worry]" />
9 <input type="submit" name="commit" value="POST" id="submit_message" data-disable-with="POST" />
10</form> </div>
11 </div>
###そこから立てた仮説と検証
仮説１
Herokuにデプロイしているので画像が反映されないのではないか？
実証１
- AWSのS３を実装してみる。
- バケットに画像情報は反映されず。エラーは解消されず。
- そもそも画像を投稿する機能ではないため、違った？
- S3上に、この２枚の画像をアップロードするも上手くいかない状況は変わらず。
仮説2
画像挿入のコードがよくないのではないか？
実証2
こちらのキータの記事を参考に、
JavaScript
1# 修正前
2 <img src="/assets/kind.png" alt="励ましている画像">
3# 修正後
4 <img src="<%= asset_path "kind.png" %>" alt="励ましている画像">
上記の通り変更。
すると、
- ローカル環境で、非同期通信ができなくなってしまった(リロードすれば画像は反映される)
上記のような状況です。
######聞きたいこと
修正する方向性について
- デプロイ環境が原因なのか
- JavaScriptの記述方法なのか
分からなくなってしまいました。
そもそもinsertAdjacentHTMLを使って、Railsで画像を挿入しようとしていたことに無理があったのでしょうか？
ローカルと本番環境で上手くいかない違いは何でしょうか？
ヒントでもいいので、こういうところが原因では？とご教授いただけたら幸いです。
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/02 15:28
退会済みユーザー
2021/02/02 20:12 編集
2021/02/02 21:45