当前位置: 首页 > 编程笔记 >

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

公羊安怡
2023-03-14
本文向大家介绍微信小程序图片加载失败时替换为默认图片的方法,包括了微信小程序图片加载失败时替换为默认图片的方法的使用技巧和注意事项,需要的朋友参考一下

先看一下效果图:

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'
 })
 }
})

总结

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

 类似资料:
  • 本文向大家介绍jQuery图片加载失败替换默认图片方法汇总,包括了jQuery图片加载失败替换默认图片方法汇总的使用技巧和注意事项,需要的朋友参考一下 本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡。 相关的知识点:jquery的ready方法、$("img").error()、img的complete属性、插件imagesLoaded、事件委托、

  • 本文向大家介绍img中的src加载失败时如何用默认图片来替换呢?相关面试题,主要包含被问及img中的src加载失败时如何用默认图片来替换呢?时的应答技巧和注意事项,需要的朋友参考一下 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

  • 本文向大家介绍微信小程序 图片绝对定位(背景图片),包括了微信小程序 图片绝对定位(背景图片)的使用技巧和注意事项,需要的朋友参考一下 微信小程序 图片绝对定位 前言: 在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满。使用背景图片的话,一般使用一些新的v

  • 本文向大家介绍微信小程序实现图片上传,包括了微信小程序实现图片上传的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下/p> 图片上传服务器: wxml wxss 思路很简单,多张上传的话,在 upImgs 方法回调做判断 index++ 继续调用 upImgs方法即可 以上就是本文的全部内容,希望对大家的学习有所帮助,也希

  • 本文向大家介绍微信小程序上传图片实例,包括了微信小程序上传图片实例的使用技巧和注意事项,需要的朋友参考一下 在网上看了好多小程序上传图片,java后端接收的示例,但是不管在哪个网站看的,代码基本是一样的,都是代码特别多。 所以就自己写一个比较简单的。  一 小程序端 user.wxml user.js  二 java端 图片存在了项目的temp目录下 简单就好,没其他功能,单纯上传图片。 以上就是

  • 本文向大家介绍Java微信小程序oss图片上传的实现方法,包括了Java微信小程序oss图片上传的实现方法的使用技巧和注意事项,需要的朋友参考一下 先将图片上传到服务器,再将服务器上的图片传入oss中 小程序js Java后台 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。