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，[object Promise]'

Answer 1

之所以发生这种情况，是因为您的axios请求正在返回一个诺言。

如果可以，请使用“异步/等待”：

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

如果您不能使用async / await，则需要通过以下方式来预加载所有图像：在创建的图像中循环这些图像并将其添加到data () { }中的数组中，然后在模板中引用该图像数组

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

1 个答案: