图片加载失败显示默认图片

背景

在写html时不想通过js、jstl表达式等去判断url是否为null，url的图片是否存在等情况，可以使用onerror。img的alt属性只是给图片设置未加载时的文字提示信息，而onerror则是给图片设置未加载时的默认图片。

隐藏图片

图片元素隐藏

<img src="http://IMG_URL" alt="图片文字提示" onerror="this.style.display='none'"/>

设置默认图

<img src="http://IMG_URL" alt="图片文字提示" onerror="this.src='默认图片的url地址';this.οnerrοr=null"/>

当onerror中设置的图片路径也不存在时就会导致浏览器一直加载这个图，造成堆栈溢出错误。所以，通常在后面加上 this.οnerrοr=null; 保证onerror里的事件只执行一次。

一个模板引擎handlebarsjs

接手维护的一个项目里用了一个叫handlebarsjs的语义模板库，通过对view和data的分离来快速构建Web模板。
https://handlebarsjs.com/guide/