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

事情是这样的:

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

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


 第二步:第自定义函数中返回完整的URLVue组件内异步更新图片Src属性

 第三步:没有第三步了,img.src属性没了。。。。

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

 我的解决办法有点饶:

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

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

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

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

5. 在父组件的函数中更新自己的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()就能搞定的问题。

上一篇:openapi回调地址请求不通过--微信企业号开发


下一篇:OpenAPI 规范 3.1.0 发布,赶紧来尝尝鲜!