Как показать изображение с токеном с axios в vuejs - PullRequest
Новая
       32

Как показать изображение с токеном с axios в vuejs

1 голос
/ 27 июня 2019

У меня есть 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, [обещание объекта] '

1 Ответ

1 голос
/ 27 июня 2019

Это происходит потому, что ваш запрос axios возвращает обещание.

Используйте Async / Await, если можете: 

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

Если вы не можете использовать async / await, вам нужно предварительно загрузить все изображения, зациклив их в созданном виде и добавить их в массив в data () { }, а затем ссылаться на этот массив изображений в вашем шаблоне.

...