小程序动态图片加载失败替换本地图片
希望效果图:
前言:写一个新闻列表,一个页面里就有几十条数据,虽然分页查询,但图片有时候还会加载失败(网速、图片大小等原因)
下面说说我的思路:
我把新闻列表封装成了一个子组件,
1.在子组件标签image中放入error事件,传入index,
2.在method里调用父组件,改变当前加载失败项的imgUrl,
3.在子组件中监听props,达到将失败图片替换本地图片的目的
核心代码:
//父组件
<sonList :list="list" />//methods
changeList(index){this.$nextTick(()=>{this.list[index].Img=null})
}
//子组件
<view v-for="(item, index) in List"><image :src="item.Img!=null ? staticfileUrl + item.Img : '../XXX/XXX/XXX.jpg'"mode="aspectFill" lazy-load="true" webp="true" @error="imgerror($event, index)"></image>
</view><script>export default {name: 'sonList',props: ['list'],data(){return{List:[]}},watch: { // watch 监听 props 中的值list(newVal, oldVal) { this.List = newVal}},mounted() {this.List=this.list}, methods: {imgerror(e, index) {this.$parent.changeList(index)},},};
</script>
Ps:如果你用的是this.setData()来更改list,报错undefined,大概是this指向问题。
方向对了解决起来比想象的要简单
小程序动态图片加载失败替换本地图片相关推荐
- 图片加载失败替换图片解决方案
图片加载失败在不同浏览器表现有差异,比如google可能会一片空白.img的宽高是0*0,ie会在图片位置会出现一个碎片图标,火狐会显示一个边框像这样: 一个页面如果很多这种好难看,一般会用默认图片替 ...
- htmlimg图片加载失败_js针对图片加载失败的处理方法分析
本文实例讲述了js针对图片加载失败的处理方法.分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解 ...
- 前端页面图片加载失败显示默认图片
方法有多种: 1.首先说我用的,看代码 //页面图片加载失败时 默认显示统一处理 document.addEventListener("error", function (e) { ...
- vue图片加载失败使用默认图片,el-image支持懒加载,自定义占位、加载失败等
<template><d2-container><h3>image加载失败使用默认图片</h3><img src=""alt= ...
- vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
- 微信小程序运行环境加载失败(2,101)
华为Mate9,EMUI 9.0.1,Android 9.测试微信小程序的时候,扫体验版小程序,提示: 运行环境加载失败(2,101) 然而各种正式版小程序无此问题,只有体验版/调试版小程序有该现象. ...
- 微信小程序 运行环境加载失败
真机调试报错:超时(104),运行环境加载失败(2101) 原因:开发工具太老了,更新就好了,,,,,, 无语
- htmlimg图片加载失败_html网页图片未加载完成或失败时显示默认图片
前言 一般一个内容多的网站相对会有比较多的图片文件,但是同时加载这些图片文件或加载失败时会出现空白占位,影响美观,通过脚本控制,可以实现加载需求内容图片时,加载未完成或失败的时候显示一张本地默认图片, ...
- 图片加载失败显示默认图片
在页面加载的图片的时候,如果图片不存在或者路径不存在,页面加载图片就会如下图所示. 解决方法: 在img 标签中添加一下标签 onerror="onerror=null;src='img/a ...
最新文章
- Android菜鸟的成长笔记(25)——可爱的小闹钟
- how to deal with Demodex
- Android开发学习——Android Studio配置SVN
- JavaScript-操作DOM对象-获得dom节点
- yeoman+grunt/gulp+bower构建angular项目
- prototype.js之$A(iterable)
- 阿里与百度的网盘中场大战
- dhcp二层中继和三层中继
- 计算机2级题无法打开,计算机2级考题word 一 看了必过
- 解决 Program type already present 问题
- 超级高铁公司Virgin Hyperloop One融资1.72亿美元 半数来自DP World
- 18.查询好友动态和推荐动态
- SaaS产品盘点:独立应用创新向全程电子商务蜕变
- 《从零开始的 RPG 游戏制作教程》第六期:设置怪物掉落物并部署关卡怪物
- 2014年年终总结——获得集团优秀员工称号的心得体会
- Android消息推送之Androidpn_Demo版到正式上线
- mysql二进制日志
- php生成PDF文件(FPDF)
- 两相步进电机和五相步进电机
- 春哥博客 - 基金初识
热门文章
- PA=LU(带行交换的矩阵分解)
- SQL Sever 远程计算机拒绝网络连接,错误:1225 具体解决步骤。
- Python easyOCR图像文本提取 初识
- c# 向已存在的excel中追加数据,oledb的方式
- 动作识别阅读笔记(三)《Temporal Segment Networks: Towards Good Practices for Deep Action Recognition》
- u盘中的android文件夹图标不显示了,u盘里的文件夹不显示,u盘文件夹不见了
- poj 3084(最小割)
- html5炫酷作品源代码,8个超炫酷的HTML5动画演示及源码
- 微信小程序openid如何获得IP白名单的方法
- 因为意外原因无法进入系统,如何在pe盘中进行系统修复?