VueJS 将 404 图片替换为默认图片

更新日期: 2019-03-10 阅读次数: 906 字数: 187 分类: VueJS

在后台数据源不可控的情况下,很有可能出现商品图片 404 的情况,而随之而来的就是界面布局错乱。例如,下图,右侧商品图片丢失,导致图片外层 div 无法计算高度,以至于排版错乱。

VueJS 将 404 图片替换为默认图片

VueJS 处理 404 的方法:

首先在 HTML 模板中,加上 error 处理函数

<img :src="product.image" alt="" @error="show_default_image">

然后在 vue 实例的方法中加上对应的处理函数,使用默认图片替换 404 错误的图片

show_default_image: function(event) {
        event.target.src = "http://temp.im/600x600";
},

如此排版就正常了

VueJS 将 404 图片替换为默认图片

爱评论不评论

近期节日

2019年05月20日 全国助残日
2019年05月21日 小满
2019年05月30日 五卅运动纪念
2019年05月31日 世界无烟日
2019年06月01日 六一儿童节
2019年06月05日 世界环境日
2019年06月06日 芒种
2019年06月06日 全国爱眼日
2019年06月07日 端午节
2019年06月11日 中国人口日
2019年06月16日 父亲节
2019年06月20日 世界难民日
查看更多节日