小程序图片加载失败使用默认图片

时间: 2020-07-15阅读: 437标签: 小程序

小程序的image标签有几个常用的属性,lazy-load(懒加载,默认为fasle,不过和本文无关),bindload(当图片加载完成的时候触发的事件),另一个就是我们本文的主角binderror(当发生错误的时候触发的事件);


有些列表中的图片是空的,我们需要对他进行处理,也就是替换一张默认图片,具体替换方法如下: 

wxml:  

<view wx:for="{{firstList}}" wx:key="index" data-id="{{item.id}}" bindtap="intoDetail" class='recordItem'>
<view class="pic">
<--data-img就是图片加载失败的时候加载的默认图片;binderror就是图片加载失败触发的事件-->
<image src="{{item.img_url==''?'../../img/public/default.png':item.img_url}}" data-index='{{index}}' data-img='../../img/public/default.png' binderror='errDetails'></image>
</view>
</view>

js:  

// 图片加载错误的时候触发; 把当前的错误图片替换成默认图片;
errDetails(e) {
var firstList = this.data.firstList;
var default_img = e.currentTarget.dataset.img;
var index = e.currentTarget.dataset.index;
firstList[index].img_url = default_img;
this.setData({
firstList
})
},


 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9420

关闭

微信小程序商城如何提高成交率

小程序商城早已经是每位商户和消费者广为人知的一类在线网上商城,和别的购物商城相比较,它的操作步骤更为便捷,同时带有好多的数据流量基础,商户还可以省掉引流过来的环节,只需把自已的营销推广业务加强就可以

把微信小程序异步API为Promise,简化异步编程

把微信小程序异步API转化为Promise。用Promise处理异步操作有多方便,谁用谁知道。微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多.

小程序插件怎么玩?有赞和千万级用户的“群里有事”做了一次示范

小程序插件让大的公司赋能外部开发者变得非常方便,极大降低了中小开发者开发丰富的小程序应用的门槛,未来的发展是很值得期待的。尤其是国庆节前夕,微信公布的关于小程序跳小程序的新政策,极大地限制了不同主体之间小程序互跳的自由度

小程序多余文本省略号显示

如何在 wxml 页面中截取数据?取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的。那还有 css 啊,不一样可以做到吗?但是个人觉得 css 复用性太差,暂不考虑。

如何探测小程序返回到webview页面?

项目是小程序(wepy), 部分页面使用webview(vue). 经常会遇见一个场景: 当小程序navigateTo到一些页面对用户的收藏状态,做了修改后, 用户点击返回按钮回到上一个页面

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

小程序返回上一个页面并更新上一个页面的数据

小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据。

Mpx 小程序框架技术揭秘

与目前业内的几个小程序框架相比较而言,mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说,是没有任何“包袱”,围绕着原生小程序这个 core 去做不同功能的 patch 工作

小程序 showLoading与showToast不能共存

loading与toast一般不能同时引用,所以一般先把hideloading了,再执行showtoast,之前把hideloading加到了complete中,所以toast就一直出问题

微信小程序实现右侧菜单的功能效果

这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!