前端的一些注意事项 <img onerror="src='images/no.png'">标签引起的异常

img标签的属性设置

            <img  src="XXXXX.png" οnerrοr="src='images/no.png'" class="img-rounded"/>

当src的文件找不到时会触发 onerror来重新请求images/no.png这张图片，但是这张图片也不存在时会循环访问服务器请求图片 造成前端崩掉，后端频繁的404 error请求。

特别当分布式部署，而静态资源在别处时，这个情况还是容易遇到的。

解决方案

①

            <img th:src="XXXX.png" οnerrοr="this.οnerrοr='';src='images/no.png'" class="img-rounded"/>

这样连onerror的图片显示不出来的情况，跟不设置onerror的情况时一样的，浏览器会给你显示一张碎裂的缩略图。因为你的image/no.png图片没找到，404错误

②

还有一个解决方法

就是onerror的图片用base64编码显式写进去,优点是一定会显式onerror设置的默认图片，缺点是字符有点儿长