请问 image 标签上提供的 @error 方法,我要怎么给他设置默认路径?如何操控本身的src?
nairenk
- 发布:2018-10-08 13:26
- 更新:2022-08-07 00:09
- 阅读:11837
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>
只针对循环说吧。
<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>
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