图片加载失败体验优化

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

<img src="invalid-link" alt="峡谷演员" /> 图片标签在网络异常、资源丢失等情况加载失败时，如果不做异常处理，浏览器会默认展示图片“裂开”💔的效果，如果设置了alt属性，则会连同alt设置的值一起展示出来，在谷歌浏览器图片加载失败的展示如下：

可以看到，加载效果非常的糟糕，对于有点追求的设计师，是根本无法容忍的。为了得到更好的视觉体验，我们有必要对于加载失败的场景进行优化处理。

传统的处理方法

传统的处理方案是在加载失败onerror的时候，使用一个加载失败的占位图代替，代码如下：

    <img src="invalid-link" onerror="this.src='error.svg';" alt="峡谷演员" />

其中，error.svg为“裂开”💔占位图的有效地址。最终得到的效果如下：

如此一来对于视觉体验方面是得到了一定的改善，但该操作会使得图片原有设置的alt属性失效，对于C端用户来说，面对一张“裂开”的图片，可能他也是裂开的，因为根本无法感知该图片本应该表述的内容的。因此，为了获得更好的体验，我们有必要继续优化该方案。

更优实践，同时展示alt的信息

为了展示alt属性设置的信息，仅仅修改src属性，很明显是无法满足需求的。为了有更多的拓展，我们可以通过添加class类名来实现：

    <img src="invalid-link" onerror="this.classList.add('error');" alt="峡谷演员" />

有了.error类名的区分，我们可以通过它来进行css效果编写，简单的css样例参考如下：

    img{
        width: 120px;
        height: 120px;
        border: 1px solid black;
    }
    img.error {
      display: inline-block;
      transform: scale(1);
    }
    img.error::before {
      content: '';
      position: absolute;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background: #fcfcfc url(error.svg) no-repeat center / 50% 50%;
      color: transparent;
    }
    img.error::after {
      content: attr(alt);
      position: absolute;
      left: 0; bottom: 0;
      width: 100%;
      line-height: 2;
      background-color: rgba(0,0,0,.3);
      color: white;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

最终得到的效果：

其中用到的attr属性读取的知识点，大家可以参照 attr使用详解；我们可以看到该方案在兼顾了资源加载失败的情况下，同时展示了alt的信息，使得代码收益达到了最大化，体验得到更进一步的提升（PS：error 的样式可根据设计师要求进行修改）。

避坑指南

兜底的图片占位资源error.svg外链地址，尽可能避免和加载失败的图片资源外链地址的一级域名一致，因为很可能https://juejin.cn/峡谷演员.jpg 和 https://juejin.cn/error.svg因为https://juejin.cn访问失效导致他们同时失效的尴尬局面。另外我们也可以直接通过css内联样式直接加载svg的内容，最终代码如下：
代码片段