【分享】HTML＜img＞标签onerror属性使用

HTML标签onerror小记录

问题描述

前端时间在写vue,感慨了一下vue功能的强大~
昨天又依需求写回了html代码
碰到一个需求：img标签中如果图片找不到，会显示下图效果，希望如果找不到时，则不显示图片。

解决思路

1、VUE

如果是在vue中，常用的方式可能是使用v-if来判断下回传的值，但现在是html中，如果不想写js,如何简单实现呢？

2、html

常规思路是在后端获取到img 标签的src时，做个判断，如果不存在时，返回其他值，但这种方法势必要动到前端和后端两个页面代码。
抱着试试的角度，想着问问AI，果不其然，AI给了我一个满意的答复，方法是标签上增加属性onerror="this.style.display='none';"

• 未修改前：

<div class="mb-0 card-font" style="text-align: left;height: 70px">
	<img style="width: 50px;height: 50px" src="/static/img/$!{adjust_oid}.jpg" >
	<img style="width: 50px;height: 50px;float: right" src="/static/img/$!{pickup_oid}.jpg"  >
</div>

• 修改后：

<div class="mb-0 card-font" style="text-align: left;height: 70px">
	<img style="width: 50px;height: 50px" src="/static/img/$!{adjust_oid}.jpg" onerror="this.style.display='none';">
	<img style="width: 50px;height: 50px;float: right" src="/static/img/$!{pickup_oid}.jpg"  onerror="this.style.display='none';">
</div>

小结

在html页面中img标签如果可以通过增加onerror="this.style.display='none';"属性。作用如下~