Как загрузить объект изображения, загруженный из aws s3, используя signURL в vuejs?

Question

<div v-for="(data, key) in imgURL" :key="key">
 <img :src= "getLink(data)" />
</div>

Где imgURL содержит имя файла и это наборы имен файлов.

  methods: {
     async getLink(url){
      let response = await PostsService.downloadURL({
        imgURL : url
      })
      //return response.data
      let imgdata = await axios.get(response.data)
      console.log(imgdata.data)
      return imgdata.data
     }
  }

В консоли печатается изображение base64, которое

data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAwAAAAHkCAIAAAAGqd9kAAAAA3NCSVQICAjb4U / gAAAAGXRFWHRTb2Z0d2FyZQBnbm9tZS1zY3JlZW5zaG907wO / PgAAIABJREFUeJ .....

Но изображение не загружается

1012 * Я попытался ссылки прямой URL, который генерируется с сервера, но не использовать, потому что я.хранение части имени файла и использование его для генерации полного URL.Сгенерированный signURL, в приведенном выше коде это "response.data".

Я загружаю изображения с использованием fileReader и axios с signatureURL.

Я хочу знать, в чем проблема?

Answer 1

Вам не нужно использовать данные в кодировке base64 для отображения изображения, это медленно.Я бы сказал, просто используйте подписанный URL.Я делал то же самое, что и вы, но позже обнаружил, что нет необходимости загружать данные изображения, вместо этого просто используйте подписанный URL в качестве источника изображения.Кроме того, генерирование подписанного URL является синхронным, что упрощает обработку кода.

Поэтому вместо этого

<div v-for="(data, key) in imgURL" :key="key">
  <img :src= "getLink(data)" />
</div>

Сделайте это

<div v-for="(data, key) in imgURL" :key="key">
  <img :src="data" />  // I am not Vue guy, so use `data` value here
</div>