img标签显示图片:
<img src="url" alt="error txt" />
当图片地址错误时,就是显示error txt,为了更好的用户体验,通常我们可以设置一张默认图片,当图片地址错误时,就显示该默认图片。
img是自闭合标签,所以一般不会去考虑使用伪元素before或after,但是,经过测试,在chrome68.0.3440.75上确实可以使用的,当图片地址正确时,该标签正常显示,before或after不生效,但是当图片错误时,img标签会变成一个双闭合标签,before和after属性生效:
<img src="url"></img>
但是在ie、safari和firefox浏览器中并不支持。
为了兼容,可以使用onerror事件,当图片不存在时,会触发该事件
<img src="url" onerror="this.src=defaultUrl" />
如果使用不当,在IE内核的浏览器下会造成死循环。比如:当默认图片的url地址也加载不成功(比如网速比较慢的时候)或不存在的话,就会反复的加载,最后造成堆栈溢出错误。可以通过设置onerror事件只触发一次来解决。
<img src="url" onerror="this.src=defaultUrl;this.onerror=null" />