如何在 vuejs 中异步加载图像 src url? [英] How to load image src url in vuejs asyncronously?

问题描述

图像 url 正在控制台中打印，但未呈现到 src 属性.如何在 vuejs 中使用 async 和 await 实现这一点?

<img :src="getLink(data)"/>

其中 imgURL 包含文件名，它是文件名的集合.

 方法:{异步获取链接(网址){让响应 = 等待 PostsService.downloadURL({imgURL : 网址})控制台日志(响应数据)返回 response.data}}

我正在使用 axios 从后端获取 URL.

解决方案

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

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

created() {//创建实例时调用该方法this.getLink();},方法: {异步 getLink(){让响应 = 等待 PostsService.downloadURL({imgURL : this.url})控制台日志(响应数据)this.link = response.data}}

在图像组件的模板中，您将拥有如下内容:

您现在肯定可以扩展该图像组件以包含加载指示器或类似的东西.

Vue.component('my-image-component', {道具: {url: {type:String, required: true}},数据:函数(){返回{链接:'加载'}},模板:'<div>{{链接}}</div>',创建(){this.getLink();},方法: {获取链接() {setTimeout(() => {this.link = '链接的响应网址:' + this.url}, 1000)}}})新的 Vue({el: '#app',数据: {imgURL":{测试 1: "1234",测试2:5678"}}})

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

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

The image url is printing in console but not rendering to src attribute. How to achieve this with async and await in vuejs?

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

Where imgURL contains file name and it is collections of file names.

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

I am getting URL from the backend with axios.

解决方案

That's not possible that way, the process of creating/updating the DOM from the values is a synchronous process. And because of that Vue.js would use the value/object returned by the getLink directly as is, which in your case would be a Promise object.

To solve the problem you would need to create an own component for those images. In the created callback of that component, you would call getLink, in the getLink method you then would set the data link as soon as the data is received, and that would trigger a rerender.

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

In the template of the image component you would have something like this:

<img :src= "link">

You for sure can now extend that image component to include a loading indicator or something like that.

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>

这篇关于如何在 vuejs 中异步加载图像 src url?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！