微信小程序图片加载失败时替换为默认图片的方法

先看一下效果图：

1、第一种情况：单独加载一个图片

index.wxml代码：

<image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image>

index.js代码：

errorFunction: function(){
 this.setData({
  avatar: '/image/default.png'
 })
}

2、第二种情况：使用for循环，加载多个图片

index.wxml代码：

<view wx:for="{{imageList}}" wx:for-index="index" wx:for-item="item" wx:key="navItems">
  <image src="{{item.img}}" binderror="errorFunction" data-index='{{index}}' mode="widthFix" />
</view>

index.js代码：

Page({
 /**
 * 页面的初始数据
 */
 data: {
 imageList:[
  {
  id:1,
  name:'白金蜡',
  price:'60元/次',
  img:'/images/service/1.jpg'
  },
  {
  id: 2,
  name: '棕榈蜡',
  price: '90元/次',
  img: '/images/service/2.jpg'
  },
  {
  id: 3,
  name: '去污蜡',
  price: '90元/次',
  img: '/images/service/3.jpg'
  },
  {
  id: 4,
  name: '微镀晶',
  price: '138元/次',
  img: '/images/service/4.jpg'
  },
 ],
 },
 onLoad: function () {
 },
 //图片加载失败时
 errorFunction: function (event) {
 var index = event.currentTarget.dataset.index
 var img = 'imageList[' + index + '].img'
 this.setData({
  [img]: '/images/default.jpg'
 })
 }
})

总结

以上所述是小编给大家介绍的微信小程序图片加载失败时替换为默认图片的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 微信小程序实现列表下拉刷新上拉加载

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:开启下拉刷新: onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px. { "enablePullDown

  • 微信小程序实现自定义加载图标功能

    效果图 实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方形的宽高以及定位(注意:此处需要将长方形的旋转中心点移动到长方形的右侧边终点,方便后期以该点旋转.): 3.通过长方形盒子的伪元素,设置显示的长方形背景和宽高,同时进行定位. 4.由于在第二步的时候,已经将旋转中心移动,此处我们直接对每一个盒子中长方形进行旋转(注意:旋转角度 = 360 / 盒子中

  • 微信小程序中使用ECharts 异步加载数据的方法

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

  • 微信小程序中使用wxss加载图片并实现动画效果

    记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bW

  • 微信小程序中使用ECharts 异步加载数据实现图表功能

    具体代码如下所示: <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas/echarts'; var barec = n

  • 微信小程序图片加载失败时替换为默认图片的方法

    微信小程序图片加载失败时替换为默认图片的方法

    先看一下效果图: 1.第一种情况:单独加载一个图片 index.wxml代码: <image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image> index.js代码: errorFunction: function(){ this.setData({ avatar: '/image/default.png' }) } 2.

  • 微信小程序分页加载的实例代码

    微信小程序分页加载的实例代码

    整理文档,搜刮出一个微信小程序分页加载的代码,稍微整理精简一下做下分享. 分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能.照例先上源码及效果图. 源码传送门 要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移量和结束偏移量请求数据,例如你一页显示10条

  • vue图片加载失败时用默认图片替换的方法

    vue图片加载失败时用默认图片替换的方法

    前言 本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 原理就是给img绑定error事件,替换原有的src地址. 首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址: 在html页面的img标签上绑定该属性 这样默认图片就设置好了: 这样做的好处就是可以提高用户体验,而图片的alt属性,是在图片显示失败后出现的文字,像下图所示,但是这样的用户体验不高: 像后台管理

  • 微信小程序JS加载esmap地图的实例详解

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小程序是企业主体,微信 web-view 组件不对个人类型的小程序开放. 2. 您需要有一个自己的域名,在嵌入网页的时候需要在微信后台验证域名(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开链接). 二.具体实现步骤 1.域名验证: 由于微信平台的规定,web-view 指向的地址,必须是

  • 微信小程序如何加载数据库真实数据的实现

    微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100txy.com,具体申请步骤大家自行去申请吧,这里我就不做过多的介绍.下面我就以加载我博客素材最新的6条数据为案例来分析,下面是详细步骤. 一.进入小程序后台配置https服务器域名 二.程序中写好调用的数据,并返回json格式 //获取素材列表接口,该方法位于Application\Home\Cont

  • 微信小程序分包加载代码实现方法详解

    微信小程序分包加载代码实现方法详解

    直接在 "app.json" 中贴入代码 { "pages": [ "pages/Login/xxxx", ], "subpackages":[{ // 这里就是贴入的代码 root值可以任意改 pages同上 "root":"packageA", "pages":[ "pages/Login/bbb", "pages/Login/ccc

  • jQuery图片加载失败替换默认图片方法汇总

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().img的complete属性.插件imagesLoaded.事件委托.事件捕获和图片预加载的方法等 1. 图片加载失败替换为默认图片 1.1 给图片绑定error事件 当图片加载失败时会触发error事件 $("img").on("error", function ()

  • JavaScript判断图片是否能够加载,失败则替换默认图片

    一为使网站整洁,二来提升网页体验,不至于让别人觉得你这网站有问题.其实实现起来也是非常简单的,具体请看看代码. 图片加载失败时用默认图片替代 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js针对图片加载失败的处理方法分析

    本文实例讲述了js针对图片加载失败的处理方法.分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数: $("img").error(function(){ //当图片加载失败时,你要进行的操作 //$(this).attr('src','images/no_pic.jpg')

  • 微信小程序首页数据初始化失败的解决方法

    微信小程序首页数据初始化失败的解决方法

    一. 问题描述 用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产

随机推荐