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

Posted 2023-02-22

【中文标题】如何在 vue js 中异步加载图像 src url？

【英文标题】：How to load image src url in vuejs asyncronously?

【发布时间】：2018-11-12 13:19:15

【问题描述】：

图像 url 正在控制台中打印，但未呈现到 src 属性。如何在 vuejs 中通过 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。

【参考方案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">

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

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>

【讨论】：

从服务器获取数据后必须调用。那么在created()中调用getLink方法有什么用呢？

@code.mevn 如果将给定代码放在图像组件中，并且在 for 循环中使用该组件，则在循环中创建组件时会调用 created。此时，getLink 被调用，因此与您的代码同时调用。然后当接收到来自服务器的响应时，设置属性link，此时绑定将更新src。

我们应该如何通过上述过程从循环中传递数据值？

@code.mevn 你真的应该仔细看看文档或解释如何编写和使用组件的教程。我更新了问题以包含一个最小示例。

如果我能拥抱你，我会的。奇迹般有效！我正在使用带有 vue 的 aws amplify 来显示来自 s3 存储桶的图像，我快要失去理智了。