Как показывать изображения полученные с API

Question

Есть запрос: user/qet-qr, который возвращает изображение qr-кода как image/png файл.

Вопрос как на Nuxt/Vue отрендерить данный респонс?

Вот код темплейта, он очень простой:

<template>
  <div class="qrCode">
    <img
      :src="qr"
      alt="user-qr"
    >
  </div>
</template>

Вот мои попытки отрендерить изображение полученное с бека:

async created () {
  // Так не сработало
  const { data: qr } = await getUserQr()
  this.qr = qr

  // Так тоже не сработало
  this.qr = 'data:image/png;base64,' + btoa(
    new Uint8Array(qr).reduce((data, byte) => data + String.fromCharCode(byte), '')
  )

  // И так тоже
  const reader = new FileReader()
  reader.onload = (e) => {
    this.qr = e.target.result
  }
  reader.onerror = (error) => {
    console.error(error)
  }
  reader.readAsDataURL(qr)
}

Answer 1

Причина была в том что при отправке запроса я не указал какой тип ответа мне ожидать, в данном случае blob, ну и после конвертировать полученные данные в ссылку:

async created () {
  const config = {
    responseType: 'blob'
  }
  const { data: qr } = await getUserQr(config)

  const reader = new FileReader()
  reader.onload = e => {
    this.qr = e.target.result
  }
  reader.onerror = error => {
    console.error(error)
  }
  reader.readAsDataURL(qrImage)
}

БЛОГ НА HUSL

Как показывать изображения полученные с API

Ответы (1 шт):