如何在 vuejs 中使用 axios 显示带有令牌的图像

Question

我有一个返回与图像关联的文章列表的 api rest，该服务需要一个令牌。

我遇到的问题是在尝试显示文章的图像时，因为它们需要令牌。我展示了部分代码来帮助我提出您的建议。

模板

<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, [对象承诺]'

Answer 1

这是因为您的 axios 请求返回了一个承诺。

如果可以，请使用 Async / Await：

async getBase64(url) {
  return await this.$http.get(url, { responseType: 'arraybuffer' })
}

如果您不能使用 async / await，您将需要通过在 created 中循环它们并将它们添加到 data () { } 中的数组中来预加载所有图像，然后在模板中引用该图像数组。