---
title: 图片加载失败处理
date: 2020-10-28 17:34:36
tags: 
  - 前端
  - css
categories: 
  - 前端杂烩
---

浏览器在图片加载失败之后，默认会显示一个图裂的图标
并且alt属性也会显示出来
```html
<img src="xxx.png" alt="这里是个提示" />
```
<!-- more -->
是这样的效果
![图裂](/images/前端杂烩/图裂.jpg)

### 图片异常处理

多数时候我们都希望能够美化一下，常规方案是这样的
```html
<img src="xxx.png" alt="这里是个提示" onerror="this.src='break.svg';" />
```
使用占位图片进行兜底处理
这样没有问题，但是此时这个替换图片，就不会显示出alt的内容了
多数时候这个alt的内容是一个需要传递给用户的提示

### CSS函数attr()
这个函数可以用来获取当前DOM元素的属性，但是目前**只能作为伪元素content属性的值**
当然获取DOM元素的任意属性都可以的
```html
<div class="box" abc="这里是文字"></div>
```
```css
.box::after{
  content: attr(abc);
}
```

#### 同时显示出alt信息
利用attr函数，就可以做点比较酷的效果了
```html
<img src="xxx.png" alt="这里是个提示" style="height:100px; width:150px;" 
  onerror="this.classList.add('error')" />
```
```css
img.error {
  display: inline-block;
  position: relative;
}
img.error::before {
  content: '';
  background: #FFF url('break.svg') no-repeat;
  background-position: center;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
img.error::after {
  content: attr(alt);
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  bottom: 0;
  left: 0;
  text-align: center;
  color: #FFF;
  padding: 5px;
}
```
效果
![显示alt内容](/images/前端杂烩/显示alt内容.jpg)