携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情。

图片加载兜底

主要参考《图片加载异常兜底方案》一文，作者写的非常全面，此处只做总结和学习思考。

通常情况下，我们加载图片使用两种方式：

使用 <img /> 标签加载图片
使用 background-image 样式加载图片

`<img />` 标签加载失败

因为 <img /> 标签本身有 error 事件，会在加载或渲染图像错误时进行处理，所以可以通过 js 为 <img /> 标签添加 onerror 的事件处理器，在 error 事件中可以：

重设 src 属性去加载默认图片
或者添加 .error 样式处理

伪元素

此外，还可以使用 CSS 的伪元素处理（before 和 after 都可以），这里的特性是：只有当图片加载失败或者没有图片的时候，才会显示伪元素。

img{
    position: relative;
    width: 200px;
    height: 200px;
}
img:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('default.jpg') #ccc; // 纯色背景作为默认占位图
}

`background-image` 加载失败

background-image 本身适合用在装饰类的图片上，相对于 <img /> 标签，它会在页面解构后才开始加载，而加载失败也不应该影响页面整体内容和用户交互，所以一般情况下不需要专门处理 background-image 加载失败的场景。

这里，作者提出了一个方案： 1、通过嗅探代码（new Image() 对象）判断图片是否可加载，不可加载时 dispatchEvent('bgImgError') 2、全局捕获 bgImgError 事件，并将 backgroundImage 替换为底图

此外，还看到一种思路：可以利用 CSS 的多背景特性，设置多张图片，浏览器会从上往下叠放多张图片，当上面的图片加载失败时用户就能看见下面的图片。

div{
  background:url(a.jpg),
  url(default.jpg);
}

但是如果上面的图片有透明部分，下面的图片就会被用户看到。

总结

js 的方法兼容性最好，但是全局绑定总是有些风险，在大型项目中使用需要谨慎
css 伪元素的方式比较安全，浏览器支持就能生效，不支持也无伤大雅
background-image 本身应该用作背景图或者角标处理，可以设置纯色作为默认占位图

解构指定默认值

继昨天发现解构没有判空导致程序错误后，今天又发现解构时指定默认值不生效导致的程序错误。【允悲】。

指定默认值

当被解构对象中的某个字段缺失时，可以使用 = 指定默认值

const obj = {
  a: 1
};

const { a, b = 2 } = obj;
console.log(a, b); // 1 2

设置别名

为了避免命名重复，可以在解构时为字段设置别名

const obj = {
  a: 1
};

const { a: b } = obj;
const a = 0;
console.log(a, b); // 0 1

过程解析：

创建变量 b
获取 obj.a 并赋值给 b

必须 undefined

只有在被解构字段的值为 undefined 时，才可以指定默认值：

被解构字段缺失
被解构字段显式拥有 undefined 值

所以，常见的错误就是当被解构字段的值不是 undefined 时，指定默认值不生效。

比如当字段的值为 null时：

const obj = {
	a: null
};

const { a = 1 } = obj;
console.log(a); // null

今日踩坑：图片加载兜底 + 解构设置默认值