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

更新日期: 2019-03-10 阅读次数: 318 字数: 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 图片替换为默认图片

领取阿里云图片 CDN 优惠券

阿里云 CDN 优惠券,最高可领 1888 元

爱评论不评论

近期节日

2019年04月01日 愚人节
2019年04月01日 复活节
2019年04月02日 国际儿童图书日
2019年04月04日 寒食节
2019年04月05日 清明节
2019年04月07日 世界卫生日
2019年04月11日 世界帕金森病日
2019年04月20日 谷雨
2019年04月22日 世界地球日
2019年04月23日 世界读书日
2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
查看更多节日