评论

小程序图片访问失败使用默认图片

小程序图片访问失败使用默认图片

不知道大家注意image组件没有,img组件里面有一个binderror属性。
binderror 当错误发生时触发,event.detail = {errMsg}
我们利用这个属性,当图片访问失败时就会访问我们自定义的函数。

好,首先我们在data里面有一个图片数组

wxml循环输出这个图片数组
同时给图片绑定数据data-index 为循环的序号 {{index}}

看一下界面(ps:第三个图片我故意写错地址)

然后我们写图片访问失败函数,很简单,直接替换images中序号为index的图片地址为我们的默认图片地址

欧了,看一下效果

点赞 1
收藏
评论

3 个评论

  • kk
    kk
    2019-05-13

    其实可以把默认图片用作css背景图,base64的

    而且默认图片放本地好点吧

    2019-05-13
    赞同 2
    回复 12
    • 鲤猫🐠
      鲤猫🐠
      2019-05-13

      这个可以有

      2019-05-13
      回复
    • 2019-05-15回复鲤猫🐠

      不是可以有,是必须用css背景图,不一定要base64,当你是图片列表的时候,你没法知道哪个图片加载失败去修改成默认图,用背景图就不用考虑这个问题了,加载失败的图片不会占位,也不会异常显示,直接显示默认背景图

      2019-05-15
      回复
    • 沙隆巴斯
      沙隆巴斯
      2019-05-15

      可否?用自定义组件的方式,把image标签包一层,加载失败替换为默认图片,把这个逻辑写入自定义组件内。

      2019-05-15
      回复
    • 2019-05-16回复

      PNG图片哭晕在厕所。。。

      2019-05-16
      回复
    • 2019-05-16回复沙隆巴斯

      然后每个需要图片的页面引入一个组件、?

      2019-05-16
      回复
    查看更多(7)
  • 2019-05-23

    js里面重置数组中图片地址方式建议不要全局替换

    this.setData({

        [`images[${index}]`]:"https://www.xxxxxxxxx"

    });


    这样写的形式性能更高

    2019-05-23
    赞同
    回复
  • 西瓜叔叔
    西瓜叔叔
    2019-05-19

    实际的数据结构比这个复杂的多,因此最好是image组件本身实现这个功能

    2019-05-19
    赞同
    回复
登录 后发表内容