網頁顯示圖檔問題

最近遇到個問題是在網頁上顯示其他網頁來源的圖檔結果顯示不出來，平時就是直接使用的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可以不做任何修改，設定多張圖檔對搜尋引擎不友好。
           

膜拜大神：

https://segmentfault.com/a/1190000016855234