小程序加载图片失败，默认图片的替换方法

jas0n 发布于2019-08-22 17:07 / 758人阅读

摘要：把这个值传到方法中进行数据的替换就可以了。怎么样简单吧其他因为小程序比较特殊，就拿为例，其实在原生的标签中是有这个这个方法的。默认报错替换的图片结束其实方法很简单，查了一下资料觉得应该整理一下，希望大家能学到。

需求

前端请求后台的接口的时候回，数据会返回图片的url地址，但是有的时候可能是数据字段的错误，或者是返回的链接中信息是404，那么前端这边怎么处理。

小程序

在小程序的官方文档中有提到,binderror这个事件方法，就是说当你的图片加载失败或者404的时候会在方法中有对应的返回值，具体返回的值入下图

场景

这样的话应用的场景就课程是头像上传报错或者单张图片，要是你报错的图片是一个列表中的很多的图片怎么办？

多张图片报错解决方法

其实很简单，我们用小程序的wepy框架为例:

大致思路：我们会在data数据中得到一个list一样的图片数据，或者你可以当成接口返回的数据结构，然后我们循环整个数据的时候会在image标签找不到资源的时候error事件，我们就会得到一个失败实例的方法，然后我们在数据循环的时候可以得到list的index值，也就是索引值。把这个值传到error方法中进行list数据的替换就可以了。怎么样简单吧~

其他

因为小程序比较特殊，就拿H5为例，其实在原生的HTML标签中是有这个onerror这个方法的。

结束

其实方法很简单，查了一下资料觉得应该整理一下，希望大家能学到。

云服务器 GPU服务器服务器图片加载失败小程序滚动到图片js linux图片的加载小程序的实用方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94871.html

图片加载相关技术

摘要：本小节将讨论与图片加载时机相关的技术预加载与懒加载。同样，可将请求成功与失败的回调，作为图片预加载成功与失败的处理。目前，出于性能与灵活性方面的考虑，我们都将一些小图片替换成矢量图或者字体。除了这些能被替换的小图之外，还有一些不得不使用位图的场景，如照片、背景等。对于这些位图，我们需要考虑它们在加载过程中的不同状态，而制定不同的表现方案。图片加载过程中的状态，大致包括：何时决定...

ZweiZhao 2019-08-20 14:47 评论0 收藏0
图片加载相关技术

摘要：本小节将讨论与图片加载时机相关的技术预加载与懒加载。同样，可将请求成功与失败的回调，作为图片预加载成功与失败的处理。目前，出于性能与灵活性方面的考虑，我们都将一些小图片替换成矢量图或者字体。除了这些能被替换的小图之外，还有一些不得不使用位图的场景，如照片、背景等。对于这些位图，我们需要考虑它们在加载过程中的不同状态，而制定不同的表现方案。图片加载过程中的状态，大致包括：何时决定...

junnplus 2019-08-30 15:53 评论0 收藏0
图片加载相关技术

摘要：本小节将讨论与图片加载时机相关的技术预加载与懒加载。同样，可将请求成功与失败的回调，作为图片预加载成功与失败的处理。目前，出于性能与灵活性方面的考虑，我们都将一些小图片替换成矢量图或者字体。除了这些能被替换的小图之外，还有一些不得不使用位图的场景，如照片、背景等。对于这些位图，我们需要考虑它们在加载过程中的不同状态，而制定不同的表现方案。图片加载过程中的状态，大致包括：何时决定...

Leo_chen 2019-08-01 16:26 评论0 收藏0
[拆弹时刻]小程序canvas生成海报（二）---优化方案

摘要：注意如果用户一开始没有微信授权，生成海报时又必须要用户头像不能使用默认的话，那就只能老老实实走之前的流程了。组件名称终端类型微信版本触发方法关于的调用方法相册权限需要你提供保存相册权限获取相册权限成功，给出再次点击图片保存到相册的提示。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海报生成示例海报生成速度缓慢...

LittleLiByte 2019-08-23 17:53 评论0 收藏0
图片懒加载及异常处理

摘要：设置防抖动，避免回调频繁执行，影响性能二图片加载错误处理有些时候，由于网络请求或是资源问题，导致图片资源请求失败，这时图片会展示为非常难看的效果破碎的图片。这时可以通过监听图片的时间来处理。在日常页面开发中，常常会涉及到图片的展示。有时候当图片资源过多时，我们希望能将图片延迟加载，同时当图片加载失败后，能用一张默认图片去代替其进行展示。其效果如图所示： showImg(https:/...

andot 2019-08-23 17:56 评论0 收藏0