小程序設(shè)置默認(rèn)圖片、錯(cuò)誤加載圖片
小程序設(shè)置默認(rèn)圖片、錯(cuò)誤加載圖片的實(shí)現(xiàn)效果:
小程序不支持h5中的onerrorimg,只開(kāi)放了binderror屬性,當(dāng)錯(cuò)誤發(fā)生時(shí),會(huì)發(fā)布到 AppService,事件對(duì)象event.detail = {errMsg: 'something wrong'}。
網(wǎng)上查了下,沒(méi)有什么好的解決方法,找了幾個(gè)案例結(jié)果都沒(méi)有實(shí)現(xiàn)想要的效果。
結(jié)合前邊看過(guò)的案例,大部分都是采用修改數(shù)據(jù)源將錯(cuò)誤圖片替換為默認(rèn)圖片的,但是有好多代碼都沒(méi)貼全,以致不好理解。
下面就根據(jù)自己遇到的情況對(duì)圖片為空、圖片路徑錯(cuò)誤的情況進(jìn)行了處理,相關(guān)代碼如下,相關(guān)數(shù)據(jù)都有說(shuō)明:
wxml:
說(shuō)明:
imgList: 圖片數(shù)據(jù)源列表,需要在data中定義初始數(shù)據(jù),或者從接口動(dòng)態(tài)獲取數(shù)據(jù);
errorFunction: 圖片加載錯(cuò)誤綁定的事件,錯(cuò)誤圖片替換為默認(rèn)圖片主要在這里操作;
data-errorimg: 錯(cuò)誤圖片索引數(shù)據(jù),需要在errorFunction中用以記錄錯(cuò)誤圖片對(duì)應(yīng)的位置;
如果圖片地址為空,是不會(huì)觸發(fā)binderror的,所以就直接對(duì)圖片地址做判斷,如果為空,則替換為默認(rèn)圖片。
js:
data: {
imgList:"", //圖片列表,動(dòng)態(tài)獲取
defaultImg: "../../../assets/img/defaultImg.png", //默認(rèn)圖片
},
......
省略圖片數(shù)據(jù)源獲取代碼
......
/**
* 圖片加載錯(cuò)誤觸發(fā)的事件
*/
errorFunction: function (e) {
if(e.type=="error"){
var errorImgIndex = e.target.dataset.errorimg //獲取錯(cuò)誤圖片循環(huán)的下標(biāo)
var imgList= this.data.imgList //將圖片列表數(shù)據(jù)綁定到變量
imgList[errorImgIndex] = this.data.defaultImg //錯(cuò)誤圖片替換為默認(rèn)圖片
this.setData({
evaluteUserPic: evaluteUserPic
})
}
}
備注:使用這種方法,是需要將圖片數(shù)據(jù)源放在data中的,這樣才可以在 binderror 的事件中進(jìn)行數(shù)據(jù)的替換,不可以直接在wxml中調(diào)用接口的數(shù)據(jù)。
HiShop小程序工具提供多類(lèi)型商城/門(mén)店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。