Vue. js, показать изображение динамически после загрузки

Question

Я работаю в Vue. js / Node.js (express. js)
И пытаюсь показать изображение после загрузки его по GET-запросу (по Ax ios) с сервера.

Файл загружен пользователем, поэтому мы не знаем о его деталях (длина или т. д. c.).
И после загрузки его необходимо показать пользователю. .

Сервер после получения запроса на загрузку просто получает файл с диска и помещает его в ответ:

(req, res) => {
    ...
    res.download(file)
}

В клиенте я сделал это до сих пор,
после загружая файл, я конвертирую его в строку Base64:

Buffer.from(response.data, 'binary').toString('base64')

(ответ на запрос GET)

и пытаюсь показать его в моем шаблоне так:

:src="'data:image/png;base64,' + myBase64string"

И не удалось вообще!
Очень ценю любой совет, предложение, помощь или др. c.

Answer 1

С помощью @Shivam Singh и этого удобного git репо файла загрузки. js я смог решить проблему.

Тип ответа на запрос (Ax ios request) должен быть responseType: 'blob'
А после получения данных с сервера я просто использовал эта строка кода ниже, чтобы сгенерировать строку DOM и затем поместить ее как sr c в тег изображения:

const imageUrl = window.URL.createObjectURL(new Blob([response.data]))

<img :src="imageUrl ">

Согласно этой ссылке URL Метод .createObjectURL, создает строку DOMString, содержащую URL-адрес, представляющий объект, указанный в параметре. Срок действия URL привязан к документу в окне, в котором он был создан.

Answer 2

new Vue({
  el: '#app',
  
  data () {
    return {
      src: null
    }
  },
 
  mounted () {
    let self = this
    fetch("https://thumbs.dreamstime.com/z/freely-accessible-examination-exposition-mosaic-ar-figures-mosaic-st-petersburg-russia-june-freely-accessible-119320551.jpg")
    .then((response) => {
      response.blob().then(blobResponse => {
        let reader = new FileReader();
        reader.readAsDataURL(blobResponse); 
        reader.onloadend = function() {
          let base64data = reader.result; 
          let img = document.createElement('img')
          img.src = base64data  
          self.$refs['img-container'].appendChild(img)
        }
      })
    })
  }
})

img {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div ref="img-container"></div>
</div>