前提・実現したいこと
VueベースのSPAを制作していて、SNSアプリによくあるサムネイルが表示する仕組みを作りたいのですが、サーバーから受け取ったblobを imgタグのsrcに挿入したいのですが、blobは受け取ることができるもののレンダリング時にimgタグはあるもののsrcが消滅して画像が表示できなくて解決に困っています。
発生している問題・エラーメッセージ
エラーメッセージは出てこなくて、imgタグのsrcが消えてしまいます。
srcにサーバーからJSON経由で取得したblobを挿入したいです。
該当のソースコード
該当箇所のみのコードにはなるんですが、axiosを使って引数に入力したuser_idに沿った画像がblobでimgのsrcに挿入したいです。
vue
1//template 2<template> 3<img v-bind:src="loadFaceThumbnail(user_id)" alt="image" /> 4</template> 5 6//script 7<script> 8export default { 9 methods: { 10 loadFaceThumbnail(user_id) { 11 const sendJSON = { 12 user_token: store.getters.getLoginToken, 13 user_id: user_id 14 }; 15 axios 16 .post( 17 "https://hogehoge.com/get_user_thumbnail", 18 sendJSON, 19 { 20 responseType: "arraybuffer", 21 } 22 ) 23 .then((response) => { 24 const thumbnail = window.URL.createObjectURL(new Blob([response.data])); 25 return thumbnail; 26 }) 27 .catch((err) => { 28 console.log("error: ", err); 29 }); 30 }, 31 } 32 33} 34</script> 35
html
1//表示結果 2<img d-xxxxxx> 3 4//実現したいこと 5<img d-xxxxxx src="blob://xxxxxxxx" alt="image" /> 6
blob自体はサーバーから正しく受け取れている状態で、imgタグのsrcに入れたいのですが、srcごと消えてしまうのが理由がわからないです。
よろしくお願いします。
補足情報(FW/ツールのバージョンなど)
使用フレームワーク
vue
Vuetify
axios(JSON通信用)
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/17 01:17
2020/07/17 02:06