场景：在开发过程中，遇到过图片地址无效、图片地址不对，或者后台给的地址无效或数据库没有该图片的情况，这时图片就会“烂掉”。
解决方案：使用默认图片来代替图片原来的地址。给图片添加一个error校验，的那个图片加载失效的时候，就会调用该属性的方法。
<img :src="item.img" @error="imgError(item)" />
在methods中添加如下的方法：
imgError(item) {
item.img = require('../../assets/img-default.png');
}
在方法中修改图片的地址为默认图片的地址。
当前端通过接口从后台获取到图片的地址参数后，该参数很可能会为null,对于这种情况，我们应该做一个判断，如果该图片地址不存在，那么直接赋值一个默认的图片地址，如果该图片的地址存在，但是链接后没有获得图片，那么，这种情况就可以采用上述的方法进行完善。
参考：
https://blog.csdn.net/zhongguohaoshaonian/article/details/79165454
场景：在开发过程中，遇到过图片地址无效、图片地址不对，或者后台给的地址无效或数据库没有该图片的情况，这时图片就会“...
我们在开发中经常碰到 图片地址失效，这时候出现下图情况，这个时候希望图片地址无效的时候，显示我们默认图片， 查看w...
个人博客—图片懒加载 页面加载时，请求图片，默认显示占位符图片； 当页面下拉到图片位置时，再把占位符图片替换成相应...
当图片不存在时，显示一个默认的图片 但如果不小心写错了后面的图片的地址，onerror在不停的执行,而且页面会不停...
显示一张图片，通过访问图片的地址，如果地址正确就显示地址正确的图片，如果不正确就显示默认的地址，说是通过JavaS...
UITableViewHeaderView下拉时图片按照比例放大 默认情况下，图片正常显示（没有被拉大） 当往下拉...
1.html img标签 src图片失效时显示默认图片
11.1 vue-router路由基本加载 小案例：在根路径下只显示图片，在/hello下即显示图片又显示hel...
替换img元素的图片地址放入data-src，src中只放入默认图片。 当网页滑动时，需要判断图片元素是否在可见区...
原理分析 先将img标签的src链接设为同一张图片(默认图片)，当js监听到该图片进入可视窗口时，再将实际地址应用...
本文标题：vue-图片容错（当图片地址无效时显示默认图片）
本文链接：https://www.haomeiwen.com/subject/lxssectx.html
网友评论