nairenk
nairenk
  • 发布:2018-10-08 13:26
  • 更新:2022-08-07 00:09
  • 阅读:11837

请问 uni-app 提供的 image 组件里面的 @error 被触发,如何改变操控 src ?

分类:uni-app

请问 image 标签上提供的 @error 方法,我要怎么给他设置默认路径?如何操控本身的src?

2018-10-08 13:26 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

多张图的话,用自定义属性做标记,可以通过这个标记来获取到目标对象所对应的数据源。
如果是单张图,那么就直接修改数据源即可。

<template>  
    <view>  
        <image v-for="(image,index) in imageList" :src="image.src" :data-index="index" :key="index" mode="" @error="handleError"></image>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                imageList: [{  
                    src: 'http://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jp' //这是个错误地址  
                }, {  
                    src: 'http://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg'  
                }],  
                correctUrl: 'http://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg' //这是个正确的地址  
            };  
        },  
        methods: {  
            handleError(evt) {  
                const index = evt.target.dataset.index;  
                this.imageList[index].src = this.correctUrl;  
            }  
        }  
    }  
</script>  
<style>  
</style>
  • z***@163.com

    不应该在@error里返回个图片对象自身的参数吗?,你这样不科学啊,要是我并非循环,没有index,而是一堆零散的图片怎么办?

    2019-04-12 09:31

  • 喜欢技术的前端

    你好,@error="handleError" 图片 监听错误 在 nvue 中不触发,这是怎么回事呢

    2019-05-16 18:32

  • 1***@qq.com

    这样写和通过在data定义变量在error的时候改变变量渲染不同的图片,在真机调试和H5都正常,但是一旦打apk包以后就加载不出来了,怎么回事?

    2022-05-20 17:17

kanv

kanv

只针对循环说吧。  
<template>    
    <view>    
        <image v-for="(image,index) in imageList" :src="image.src" :data-index="index" :key="index" mode="" @error="handleError(image)"></image>    
    </view>    
</template>    

<script>    
    export default {    
        data() {    
            return {    
                imageList: [{    
                    src: 'http://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jp' //这是个错误地址    
                }, {    
                    src: 'http://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg'    
                }],    
                correctUrl: 'http://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg' //这是个正确的地址    
            };    
        },    
        methods: {    
            handleError(item) {    
              //src为for循环中绑定的对象的属性。直接传对象。  
              item.src=correctUrl;  
            }    
        }    
    }    
</script>   
1***@qq.com

1***@qq.com

error方法是不是有什么问题,不管是在函数里直接替换图片还是通过定义变量在error中修改变量来实现渲染不同的图片,在h5端和真机调试都是可以的,但是打apk包以后就无法加载出来,直接一个空白区域,各位都没问题吗?

梦想与想象

梦想与想象 - 梦想不等于是幻想

图片是undefined会触发吗

该问题目前已经被锁定, 无法添加新回复