vueでサーバーから受け取った画像を表示させたい

Question

前提・実現したいこと

VueベースのSPAを制作していて、SNSアプリによくあるサムネイルが表示する仕組みを作りたいのですが、サーバーから受け取ったblobを imgタグのsrcに挿入したいのですが、blobは受け取ることができるもののレンダリング時にimgタグはあるもののsrcが消滅して画像が表示できなくて解決に困っています。

発生している問題・エラーメッセージ

エラーメッセージは出てこなくて、imgタグのsrcが消えてしまいます。
srcにサーバーからJSON経由で取得したblobを挿入したいです。

該当のソースコード

該当箇所のみのコードにはなるんですが、axiosを使って引数に入力したuser_idに沿った画像がblobでimgのsrcに挿入したいです。

//template
<template>
<img v-bind:src="loadFaceThumbnail(user_id)" alt="image" />
</template>

//script
<script>
export default {
 methods: {
    loadFaceThumbnail(user_id) {
      const sendJSON = {
        user_token: store.getters.getLoginToken,
        user_id: user_id
      };
      axios
        .post(
          "https://hogehoge.com/get_user_thumbnail",
          sendJSON,
          {
            responseType: "arraybuffer",
          }
        )
        .then((response) => {
          const thumbnail = window.URL.createObjectURL(new Blob([response.data]));
          return thumbnail;
        })
        .catch((err) => {
          console.log("error: ", err);
        });
    },
  }

}
</script>

//表示結果
<img d-xxxxxx>

//実現したいこと
<img d-xxxxxx src="blob://xxxxxxxx" alt="image" />

blob自体はサーバーから正しく受け取れている状態で、imgタグのsrcに入れたいのですが、srcごと消えてしまうのが理由がわからないです。

よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

使用フレームワーク
vue
Vuetify
axios(JSON通信用)

Answer 1

この問題の理由は二つあると思います。
一つ目はv-bindはプロパティに対してしか使えないことにより、img要素のsrcが空になったから。
以下がその根拠となる記事です。
Vue.js v-vind

二つ目はmethodsはcomputedと違いキャッシュされないため、ブラウザにその結果が残らないから。
以下がその根拠となる記事です。
Vue.jsにおけるcomputedとmethodsの違い

つまり、v-bindに対してmethodsではなくプロパティとなるcomputedを使用すれば良いのではないかということです。

Comments

[gen0425t]

アドバイスありがとうございます。
computedは関数に引数を使えないと思い込んでいたので数日試行錯誤していたのですが、引数付きの関数として書く方法を見つけて変更してみました。

img :src に文字列が入るようになったのですが、戻り値の扱い方が間違っているのかメソッドの全文が挿入されるのでもう少し試行錯誤してみたいと思います。

[SanQ]

computed: {}の中に無名関数（function()）を入れているからメソッドの全体が入ってしまったのではないですか？
computed: {
computedName: function() {
関数の内容...
}
}
のように関数に名前を与え、:src="関数の名前(上の例でいえばcomputedName)"を入れれば関数が丸ごと入るなんてことはないと思います。