1

我有一个 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，[对象承诺]'

4

1 回答 1

1

发生这种情况是因为您的 axios 请求正在返回一个承诺。

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

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

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

于 2019-06-26T22:27:29.747 回答