jqueryで画像が読み込めず、ビューが崩れてしまう。

jqueryで画像が読み込めず四苦八苦していた。

結論

imgタグの位置がおかしかったから。

経緯

が表示されてしまうので調べてみると、

img src="~~~~~~"の~~~~~~が間違っているとの記載があり、確認してみると

<img src= "message.image" >

となっていた。

これでは、message.imageが文字列として読まれてしまい、パスとして読み込まれていないことがわかる。

したがって

<img src= "${message.image}" >

と記載してあげれば解決する。

と思いきや・・・

まだ、

が表示される。

原因は、

`<div class="chat-main__message-name">

　　${message.user_name}

　<p class="chat-main__message-list-date">

　　${message.created_at}

　</p>

　 <p class="chat-main__message-list-message">

　　 ${message.text}

　　 <img src= "${message.image}" >

　　 </img>

　 </p>`

</div>

となっていたためである。

どういうことかというと、

p =class"chat-main__message-list-messageの記述が、divタグの中に入っていたため

sass本来の記述が読み込まれなかったことが原因。

なので

`<div class="chat-main__message-name">

　　${message.user_name}

　<p class="chat-main__message-list-date">

　　${message.created_at}

　</p>

</div>

　<p class="chat-main__message-list-message">

　　　${message.text}

　　<img src= "${message.image}" >

　　</img>

　</p>`

に、変更する。