总字数 387
预计阅读时间 1 分钟
浏览器在图片加载失败之后,默认会显示一个图裂的图标
并且alt属性也会显示出来
1 | <img src="xxx.png" alt="这里是个提示" /> |
是这样的效果
图片异常处理
多数时候我们都希望能够美化一下,常规方案是这样的
1 | <img src="xxx.png" alt="这里是个提示" onerror="this.src='break.svg';" /> |
使用占位图片进行兜底处理
这样没有问题,但是此时这个替换图片,就不会显示出alt的内容了
多数时候这个alt的内容是一个需要传递给用户的提示
CSS函数attr()
这个函数可以用来获取当前DOM元素的属性,但是目前只能作为伪元素content属性的值
当然获取DOM元素的任意属性都可以的
1 | <div class="box" abc="这里是文字"></div> |
1 | .box::after{ |
同时显示出alt信息
利用attr函数,就可以做点比较酷的效果了
1 | <img src="xxx.png" alt="这里是个提示" style="height:100px; width:150px;" |
1 | img.error { |
效果