文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序开发设置默认图片、错误加载图片的方法

2023-06-26 08:10

关注

本文小编为大家详细介绍“微信小程序开发设置默认图片、错误加载图片的方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序开发设置默认图片、错误加载图片的方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

wxml:

<image src='{{imgList[index]==""?defaultImg:imgList[index]}}' binderror="errorFunction" data-errorimg="{{index}}" />

说明:     
imgList: 图片数据源列表,需要在data中定义初始数据,或者从接口动态获取数据;
errorFunction: 图片加载错误绑定的事件,错误图片替换为默认图片主要在这里操作;
data-errorimg: 错误图片索引数据,需要在errorFunction中用以记录错误图片对应的位置;
如果图片地址为空,是不会触发binderror的,所以就直接对图片地址做判断,如果为空,则替换为默认图片。

js:

data: {imgList:"", //图片列表,动态获取defaultImg: "../../../assets/img/defaultImg.png", //默认图片},......省略图片数据源获取代码......errorFunction: function (e) {if(e.type=="error"){var errorImgIndex = e.target.dataset.errorimg //获取错误图片循环的下标var imgList= this.data.imgList        //将图片列表数据绑定到变量imgList[errorImgIndex] = this.data.defaultImg //错误图片替换为默认图片this.setData({evaluteUserPic: evaluteUserPic})}}

备注:使用这种方法,是需要将图片数据源放在data中的,这样才可以在 binderror 的事件中进行数据的替换,不可以直接在wxml中调用接口的数据。

读到这里,这篇“微信小程序开发设置默认图片、错误加载图片的方法”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯