不知道大家注意image组件没有,img组件里面有一个binderror属性。
binderror 当错误发生时触发,event.detail = {errMsg}
我们利用这个属性,当图片访问失败时就会访问我们自定义的函数。
好,首先我们在data里面有一个图片数组
wxml循环输出这个图片数组
同时给图片绑定数据data-index 为循环的序号 {{index}}
看一下界面(ps:第三个图片我故意写错地址)
然后我们写图片访问失败函数,很简单,直接替换images中序号为index的图片地址为我们的默认图片地址
欧了,看一下效果
其实可以把默认图片用作css背景图,base64的
而且默认图片放本地好点吧
这个可以有
不是可以有,是必须用css背景图,不一定要base64,当你是图片列表的时候,你没法知道哪个图片加载失败去修改成默认图,用背景图就不用考虑这个问题了,加载失败的图片不会占位,也不会异常显示,直接显示默认背景图
可否?用自定义组件的方式,把image标签包一层,加载失败替换为默认图片,把这个逻辑写入自定义组件内。
PNG图片哭晕在厕所。。。
然后每个需要图片的页面引入一个组件、?
js里面重置数组中图片地址方式建议不要全局替换
this.setData({
[`images[${index}]`]:"https://www.xxxxxxxxx"
});
这样写的形式性能更高
实际的数据结构比这个复杂的多,因此最好是image组件本身实现这个功能