平常在项目中,我们会经常需要有加载网络图片的功能,但是存在图片地址问题、网络问题等导致图片加载失败,需要展示一个占位图,所以我这里总结了三种办法,仅供大家参考,写的不好大家见谅。
一、导入第三方插件,本人没有使用过,所以不知道质量如何,大家有兴趣可以去详细研究下(传送门)
二、监听image标签的@error事件进行占位图的显示,这里我直接贴代码,大家看看逻辑即可明白。
注意:这里有点不好的就是一开始显示的都是空白的,只有图片加载成功或者失败后才会显示正常图片还是占位图
data里面的一些初始化数据
data() {
return {
placeholderImage:'/static/logo.png',//占位图
dataList: [
{"icon":"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045