1

I have a api rest that returns a list of articles associated with an image, the service requires a token.

The problem I have is when trying to show the images of the article, since they need the token. I show part of the code to help me with your suggestions.

Template

<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>

Method

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

The token I am sending from the main statement of the axios, when I check the browser console I can see the images normally, but in the image src I get src = 'data: image / jpeg; base64, [object Promise]'

Flaquito183
  • 49
  • 1
  • 7

1 Answers1

1

This is happening because your axios request is returning a promise.

Use Async / Await if you can:

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

If you can't use async / await you're going to need to preload all the images by looping them in created and adding them to an array in data () { } and then reference that array of images in your template.

webnoob
  • 15,747
  • 13
  • 83
  • 165