如何异步在Vue.js中加载图像src url？

Question

图片网址正在控制台中打印，但未呈现为src属性。如何在vuejs中使用异步和等待来实现此目标？

<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
      })
      console.log(response.data)
      return response.data
     }
  }

我从axios从后端获取URL。

Answer 1

这样是不可能的，从值创建/更新DOM的过程是一个同步过程。因此，Vue.js将按原样使用getLink直接返回的值/对象，在您的情况下，这将是一个Promise对象。

要解决该问题，您需要为这些图像创建一个自己的组件。在该组件的已创建回调中，您将调用getLink，在该getLink方法中，您将在link收到数据后立即设置数据，这将触发重新渲染。

created() {
  // when the instance ist create call the method
  this.getLink();
},

methods: {
  async getLink(){
    let response = await PostsService.downloadURL({
      imgURL : this.url
    })
    console.log(response.data)
    this.link = response.data
  }
}

在图像组件的模板中，您将具有以下内容：

<img :src= "link">

您现在确定可以扩展该图像组件以包括一个加载指示器或类似的东西。

created() {
  // when the instance ist create call the method
  this.getLink();
},

methods: {
  async getLink(){
    let response = await PostsService.downloadURL({
      imgURL : this.url
    })
    console.log(response.data)
    this.link = response.data
  }
}

<img :src= "link">