如何在vuejs中使用signedURL加载从aws s3下载的图像对象？

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 图像，即

数据：图像/ png;base64，iVBORw0KGgoAAAANSUhEUgAAAwAAAAHkCAIAAAAGqd9kAAAA3NCSVQICAjb4U/gAAAAGXRFWHRTb2Z0d2FyZQBnbm9tZS1zY3JlZW5zaG907wO/PgAAIABJREFUeJ.....

但图像未加载。

我尝试链接从服务器生成的直接 url，但没有用，因为我存储了部分文件名并使用它来生成完整的 URL。生成的signedURL是，在上面的代码中是“response.data”。

我正在使用带有signedURL的fileReader和axios上传图像。

我想知道问题出在哪里？

Answer 1

不需要使用base64编码的数据来显示图像，速度很慢。我想说，只需使用签名网址即可。我正在做和你一样的事情，但后来发现不需要下载图像数据，而是简单地使用签名的 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>

Answer 2

对于加载预签名图像 url，在 Vue3 和 Vuetify3 中，您可以使用以下说明：

简单来说，你必须使用lazy-src、eager和src属性，例如：

 <VAvatar rounded size="120">
            <VImg
              cover
              :src="release.artwork_image"
              :lazy-src="release.artwork_image"
              alt="loading"
              eager
            />
          </VAvatar>

或者要添加自定义加载程序，您可以使用另一种方法，如下所示：

<VAvatar rounded size="120">
           <img
              class="v-img__img v-img__img--cover"
              width="100"
              height="100"
              :src="release.artwork_image"
              @load="onImageLoad"
            />
            <VProgressCircular
              v-if="imgloader"
              :size="30"
              width="3"
              color="primary"
              indeterminate
            /> 
          </VAvatar>

您的 @load 事件将是，

<script setup> 
  const imgloader = ref(true);
  const onImageLoad = () => {
   imgloader.value = false;
 };

谢谢您，希望它对您有很大帮助:) 编码愉快