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

Question

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

12

图片网址已经在控制台中打印，但无法渲染到src属性中。如何在Vue.js中使用async和await实现此操作？

<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。

- code.mevn

2个回答

0

今天很容易，只需使用let images = ref([])，响应式将为您加载

- sema toghem

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Ivan Starostin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- t.niese · Accepted Answer

以那种方式不可能，从值创建/更新DOM的过程是同步的。因此Vue.js会直接使用getLink返回的值/对象，而在您的情况下将是一个Promise对象。

要解决这个问题，您需要为这些图像创建一个自己的组件。在该组件的created回调中，您将调用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">

你现在肯定可以扩展那个图像组件，以包括加载指示器或类似的内容。

Vue.component('my-image-component', {
  props: {
    url: {type:String, required: true}
  },
  data : function() {
    return {link : 'loading'}
  },
  template: '<div>{{ link }} </div>',
  created() {
    this.getLink();
  },
  methods: {
    getLink() {
      setTimeout(() => {
        this.link = 'response url for link: ' + this.url
      }, 1000)
    }
  }
})


new Vue({
  el: '#app',
  data: {
    "imgURL": {
      test1: "1234",
      test2: "5678"
    }
  }
})

<div id="app">
  <div v-for="(data, key) in imgURL" :key="key">
    <my-image-component :url="data"></my-image-component>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js" type="text/javascript" charset="utf-8"></script>