vue.js - vuejsでaxiosを使ってトークンで画像を表示する方法

Question

画像に関連付けられた記事のリストを返す API レストがあります。サービスにはトークンが必要です。

私が抱えている問題は、トークンが必要なため、記事の画像を表示しようとするときです。あなたの提案に役立つコードの一部を示します。

テンプレート

<div class="col-md-3 d-flex align-items-stretch" v-for="article in listarticles" :key="article.idArticle">
    <div class="main-card mb-3 card">
        <img width="100%" class="card-img-top" :src="'data:image/jpeg;base64,' + getBase64(article.images[0].url)" >
    </div>
</div>

方法

getBase64(url) {
            return this.$http
              .get(url, {
                responseType: 'arraybuffer'
              })
              .then(response => console.log('data:image/jpeg;base64,' + new Buffer(response.data, 'binary').toString('base64')))
          }

axios のメイン ステートメントから送信しているトークンは、ブラウザ コンソールを確認すると正常に画像が表示されますが、画像 src では src = 'data: image / jpeg; となります。base64、[オブジェクト Promise]'