微信小程序圖片加載失敗時(shí)替換為默認(rèn)圖片的方法
更新時(shí)間：2019年12月09日 11:26:38 作者：七寶琉璃科技
這篇文章主要介紹了微信小程序圖片加載失敗時(shí)替換為默認(rèn)圖片的方法,本文分情況通過實(shí)例代碼給大家講解，需要的朋友可以參考下
先看一下效果圖：
1、第一種情況：?jiǎn)为?dú)加載一個(gè)圖片
index.wxml代碼：
<image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image>
index.js代碼：
errorFunction: function(){
this.setData({
avatar: '/image/default.png'
})
}
2、第二種情況：使用for循環(huán)，加載多個(gè)圖片
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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
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 () {
},
//圖片加載失敗時(shí)
errorFunction: function (event) {
var index = event.currentTarget.dataset.index
var img = 'imageList[' + index + '].img'
this.setData({
[img]: '/images/default.jpg'
})
}
})
總結(jié)
以上所述是小編給大家介紹的微信小程序圖片加載失敗時(shí)替換為默認(rèn)圖片的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了JS數(shù)組的高級(jí)使用方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組的增刪改查、排序、隨機(jī)數(shù)等相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
JavaScript中日常收集常見的10種錯(cuò)誤(推薦)
本文是小編給大家日常收集整理的js中常見的10種錯(cuò)誤，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲完整實(shí)例
飛機(jī)大戰(zhàn)坦克是一款小游戲，相信很多朋友都有玩過，由于最近在深入學(xué)習(xí)Javascript，所以想著用利用Javascript來實(shí)現(xiàn)這個(gè)游戲，下面這篇文章主要介紹了如何利用JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲,需要的朋友可以參考下2017-01-01
本篇文章主要是對(duì)Javascript遍歷頁(yè)面text控件進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript自定義鼠標(biāo)右鍵菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
uni-app實(shí)現(xiàn)頁(yè)面通信EventChannel的操作方法
使用了EventBus的方法實(shí)現(xiàn)不同頁(yè)面組件之間的一個(gè)通信,在uni-app中,我們也可以使用uni-app API,uni.navigateTo來實(shí)現(xiàn)頁(yè)面間的通信,這篇文章主要介紹了uni-app實(shí)現(xiàn)頁(yè)面通信EventChannel的操作方法,需要的朋友可以參考下2024-05-05
基于javascript實(shí)現(xiàn)九宮格大轉(zhuǎn)盤效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)九宮格大轉(zhuǎn)盤效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
今天小編就為大家分享一篇layer.prompt輸入層的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了js點(diǎn)擊事件鏈接的問題解決方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了three.js 如何制作魔方，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07