小程序图片加载失败binderror方法处理

这篇具有很好参考价值的文章主要介绍了小程序图片加载失败binderror方法处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景:我们在小程序项目中的一个图片列表,当某些图片加载失败后,直接显示空白,这样用户体验不好,为了解决当图片加载失败,我们给一个默认图片代替,参考官方给的图片加载失败的处理方法:binderror

cover-image | 微信开放文档

第一步: 给定一个循环列表

<image src='{{img}}' binderror='setFailImg' data-errorimg="{{index}}" mode="aspectFill" />

data-errorimg="{{index}}":指定当前元素下标

binderror='setFailImg':图片加载失败的处理方法

第二步:js中做相应处理 

setFailImg(e){
        var errorImgIndex = e.target.dataset.errorimg//获取当前下标
        console.log('加载失败的数据及下标有:',e,errorImgIndex)
        this.data.hotsaleGoodsList[errorImgIndex].hotWideGraph=this.data.imgs//给原数据指定下标对应的对象赋值(这个值是你指定的默认值)
        this.setData({//重新给原数据赋值
            hotsaleGoodsList:this.data.hotsaleGoodsList
        })
    },

下图是获取到加载失败的对象及下标

小程序图片加载失败binderror方法处理

 到这就完成了小程序列表图片加载失败设置默认图的全部操作!!!

小程序图片加载失败binderror方法处理

题外话:如果你需要处理加载成功时用:bindload文章来源地址https://www.toymoban.com/news/detail-509522.html

到了这里,关于小程序图片加载失败binderror方法处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue 部分网络图片加载失败,控制台报错,http状态码403

    vue项目中有时候请求网络地址的图片http状态码会报403错误 原因: 1.http请求头中有一个referrer字段,用来表示发起http请求的源地址信息 2. 服务器端在拿到这个referrer值后判断请求是否来自本站 若不是则返回403,从而实现图片的防盗链。上面出现403就是因为,请求的是别人服务

    2024年02月14日
    浏览(51)
  • Unity 多场景/大场景加载解决方法

    记录一下最近学习的新的知识,关于解决多场景加载的问题,方便下次及时的巩固复习。 此次使用的是 Unity的异步加载 来实现功能。 将一个大场景的地图分成好几个场景,利用玩家的距离来判断加载哪个场景和卸载哪个场景。 利用玩家的自身距离和预加载场景的距离判断

    2024年02月04日
    浏览(48)
  • 图片预加载需要token认证的地址处理

    备注: 一般加载图片会用到img标签,添加src属性,如下所示: img src=\\\"imgUrl\\\" / 但是因为需要在get请求头中加入token信息,不能直接将后台返回的图片url直接添加到src 后端返回二进制流,我们需要将二进制流以图片的形式显示在页面中 看到二进制,可以 将responseType 设置为 blob U

    2024年02月16日
    浏览(31)
  • 2-3. Maven依赖加载不进来?依赖加载失败?你值得掌握如何排查的方法

    在上文2-2. SpringBoot API开发详解 --SpringMVC注解+封装结果+支持跨域+打包,有位粉丝在跟着实战中遇到了问题,反应 @SpringBootApplication 和 SpringApplication 飘红,从截图的 现象 上看, 问题 在于Maven依赖没有加载进来,找不到相关依赖就会飘红! 那么Maven依赖为什么没有加载进来呢

    2023年04月20日
    浏览(37)
  • Unity使用进度条加载实现场景切换(简单方法)

     我们实现场景切换时一般使用方法:  这种方法可以实现场景页面的直接切换,但在切换场景前想加这种进度条的方式该如何实现呢? 接下来小编为大家讲解一种非常简单的方法供参考。 1.找一张实现页面切换的背景图片(任何图片都可),记得将其改为“精灵模式”。

    2024年02月13日
    浏览(53)
  • Unity 加载本地图片的方法

    Unity加载本地图片有不少方法,一般使用以下这些: 1、使用System.IO下的File.ReadAllBytes方法: 2、 使用System.IO下的数据流FileStream加载 3、使用www类: 4、由于www类在新版中已经过时了,所以在新版Unity中我们可以使用UnityWebRequest类加载本地图片: 加载效果如下:Unity分别用4种方

    2024年02月03日
    浏览(36)
  • flutter-使用extended_image操作图片的加载和状态处理

    在 Flutter 的开发过程中,经常会遇到图片的显示和加载处理,通常显示一个图片,都有很多细节需要处理,比如图片的加载、缓存、错误处理、图片的压缩、图片的格式转换等,如果每个地方都手动处理,就太麻烦了,这时候就可以使用糖果大佬的插件 extended_image,它是官方

    2024年02月21日
    浏览(34)
  • 小程序使用Image对象预加载图片·获取图片信息

    微信和支付宝等小程序目前都没有直接调用Image的接口, 但可以借用canvas曲线救国,在页面设置个不可见的canvas,再通过canvas的接口能力就能调用到image了 微信案例 支付宝案例 微信小程序开发文档·canvas 支付宝小程序开发文档·canvas

    2024年02月06日
    浏览(35)
  • 【OpenCV】P2 程序加载显示图片

    在 Opencv 中,如果想要加载展示一张图片,有以下几个步骤: 读取图像 :根据指定路径读取图像,将图像转化为数字矩阵形式; 创建窗口 :创建图像显示窗口,命名窗口名称; 显示图像 :通过窗口以数字矩阵形式展示图像; 释放内存 :展示完成,释放内存。 OpenCV 提供函

    2024年01月25日
    浏览(33)
  • vue中实现图片懒加载的方法(一)

    1.背景:      前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载。 2.懒加载的意义    图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是页面一次性展示了很多图片的情况,所以在这种

    2023年04月20日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包