Vue组件内异步更新图片Src属性

本文主要是介绍Vue组件内异步更新图片Src属性，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

事情是这样的：

系统内的存的均为图片的ID号，从数据库里拿出来以后在Vue的组件内进行数据绑定，但是绑定的是一个ID号，需要转换为图片的url地址，但通过组件的自定义函数处理后不显示。

第一步：绑定组件的自定义函数

 第二步：第自定义函数中返回完整的URL

 第三步：没有第三步了，img.src属性没了。。。。

 我的解决办法有点饶：

１. 父对象中定义一个存储图像ID和URL的键值对象,并进行初始化

２. 通过props将这个对象赋值给组件内部，img.src = photos[id]

3. 同时再给img定义一个其它的属性来调用get_cover回调　img.data-cover=“get_cover"

4. 当组件的回调被执行时通过this.$emit 来触发父组件的函数

５. 在父组件的函数中更新自己的photo键值对。。。

局部代码如下：

第一步：

new Vue({
el:'#demo1', 
data() {
        return {           
            photoObj:{}
        }
    },
    created(){    
        //始始化photoObj的数据，下面是根据我自己的内容进行的初始化
        if(sizeItemData.length > 0){
            let photoTmp = {};
            sizeItemData[0]['attr'].forEach(function(attr){
                console.log('create====',attr.photo);
                let key = attr.photo;
                photoTmp[key] = key;
            });
            this.photoObj = photoTmp;
        }
    },

.........................

第二步：

JS代码部分

Vue.component('size-item',{
    template:$("#sizeItemTpl").html(),
    //声明props,这里可以把组件外的变量传入组件内，组件调用时需要进行v-bind
    props:['photos'],

组件绑定部分：

<size-item  v-for="(row,index) in vItemData" :key="index" v-bind:index="index" v-bind:item="row" v-bind:photos="photoObj" v-on:up-global-photos="updatePhotos"></size-item>

注意里面的：v-bind:photos="photoObj"

这里是结合上面的JS部分，将像对象中的photoObj映射到组件内部通过photos进行使用。

第三步：

<img :data-src="getCover(attr.photo)" :src="photos[attr.photo]" class="preview-file" v-if="item.attr[aIndex].photo != 0"/>

看这到里的 :src 绑定的第二步中的photos的值

同时还绑定了一个 :data-src="getCover" 他的目的就是为了触发异步获取图片URL地址

第四步：回调函数内

getCover:function(photo_id){
            that = this;
            axios({
                method:'get',
                url:'。。。。。attachmentUrl.html?id='+ photo_id
            }).then(function(res){
                let imageUrl = res.data;
                that.$emit('up-global-photos',[photo_id,imageUrl]);
            });

注意这的： that.$emit('up-global-photos') ，这里的up-global-photos 在第二步代码中的组件部分通过 v-on:up-global-photos="updatePhotos" 来将对应到像Vue的自定义方法updatePhotos

第五步：也是胜利的一步

new Vue({
    el:'#sizeItemBox',
 methods:{
    updatePhotos:function(val){
            console.log('new photo=',val);
            this.photoObj[val[0]] = val[1];
        }

。。。。。。。。。。。。。。。。。。。。。。。

前后省略不相干的代码

如此转一大圈解决了一个JQuery $.get()就能搞定的问题。

这篇关于Vue组件内异步更新图片Src属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！