最近遇到个问题是在网页上显示其他网页来源的图片结果显示不出来，平时就是直接使用的img，并没有任何的设置，这次碰到也是一脸蒙圈，今天就来说说图片显示的问题。
访问图片返回403 forbidden问题
解决这个问题只需要在头部添加一个meta
<meta name="referrer" content="no-referrer" />
出现图片资源失败的情况
解决方式1（img属性 alt）：
<img src="logo.jpg" alt="logo" />
这里的alt属性是为了当图片加载失败时告诉用户图片信息的
解决方式2（js onerror）：
onerror 事件会在文档或图像加载过程中发生错误时触发。
在装载文档或图像的过程中如果发生了错误，就会调用该事件。
使用方式也很简单
<img src="logo.jpg" alt="logo" onerror="this.src='https://xxx.img/logo.png'" />
但是，这个方法一定要注意，保证onerror里面赋值的图片地址一定不能出错，否则，就会无限调用onerror，会导致页面崩掉，为了避免这样的情况，可以采用base64的方式，缺点是太长
<img src="logo.jpg" alt="logo" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZu...IIggggCCKAIIgAgiACCIIIIAgigCCIAIIgAgiCCCAIIoAgiACCIAIIQm7xfwIMAADDZPsh5DI6AAAAAElFTkSuQmCC'">
但是在react中可以指定onerror中的下一次onerror为空，避免一直调用onerror ：
<img src={"logo.jpg"} alt={"logo"} onError={(e) => {e.target.onerror = null;e.target.src="https://xxx.img/logo.png"}}/>
解决方式3（css）
1）伪元素
虽然img是单标签，里面不能包裹其他元素，但是却可以包含伪元素
不过有个特征，只有当图片加载失败或者没有图片的时候，才会显示伪元素
所以可以使用伪元素实现默认提示效果
img{
display: inline-block;
position: relative;
width: 200px;
height: 200px;
background: #ccc;
vertical-align: top;
}
img:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('img/b.jpg') #ccc;
}
思路很简单，就是用伪元素覆盖在原图片上，而且图片加载失败也没关系，最多不显示，也可以用纯色背景作为默认占位图。
在react组件中使用伪元素：
A.使用styled-components/radium
B.使用文件引用的方式
2）背景图片
利用css3中有多背景特性
div{
background: url(a.jpg),
url(b.jpg),
url(logo.png);
}
指定的时候，按浏览器中显示时图像叠放的顺序从上往下指定的，第一个图像文件是放在最上面的，
最后指定的文件是放在最下面的。
也可以实现默认图片的显示
.img{
width: 200px;
height: 200px;
background: url('a.jpg'), url('logo.png') #f1f1f1;
}
不过这种方式本质上是多张图片重叠在一起，如果上一层加载失败，才会看见底下的那一张，也就是说如果都加载成功，其实都是存在的，如果上图的图有透明的部分，就有可能看得到底下的图。
小结：
从兼容性方面来讲，js方法适应性最广，伪元素方式属于纯css方式，html可以不做任何修改，设置多张图片对搜索引擎不友好。