如何在vuejs中异步加载图片资源url？
如何在vuejs中异步加载图片资源url？
提问于 2018-06-03 01:58:09
图像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。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-03 15:03:48
这是不可能的，从值创建/更新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
}
}在image组件的模板中，您将拥有类似如下的内容：
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50659676
复制相关文章
相似问题