img的src如果載入失敗，在chrome會有一個邊框？

01-15

這個邊框，是怎麼來的？
在css中有什麼辦法讓它不顯示嗎？
---------------------------------------

更新於：2016-04-06
看到一個比較好的解決方案，思路也比較巧妙
Styling Broken Images

寫了一個簡單的js解決方案供你參考吧，考慮到如果只放script代碼段不友好，所以全部貼上來了直接粘貼到html文件看看吧，希望能幫到您~

& & & & && & & & & & function whenError(a){ a.onerror=null; a.src="http://avatar.csdn.net/1/E/E/1_qq_27080247.jpg"; console.log("圖片出錯的時候調用默認的圖片"); } & &

image載入不出來，這個邊框應該是瀏覽器去實現的，找道理來說，你應該在onerror去放一個默認圖片，或者你刪除、隱藏都可以的。但你確實想去掉它在chrome中的顯示，也是可以的

代碼來了：

& & & & &Hide Broken Image border& &

.image-container{ width:100px; height:100px; overflow:hidden; display:block; } .image-container img{ margin:-1px; } & & & & & & & &

不要謝我，我不生產代碼，我只是代碼的搬運工

JS Bin - Collaborative JavaScript Debugging

http://stackoverflow.com/questions/13151340/how-to-remove-borders-around-broken-images-in-webkit

我刪了點它的css

img[src=""]{ opacity: 0; } 可以在src為空的時候隱藏，動態添加以後img就會出現。

有onerror屬性你讓它失敗的時候載入一張表達載入失敗的圖片就不會是那個醜醜的樣子了

去除不幹凈，會剩下四個邊的中心，比之前更丑了。

同樣遇到這個問題，想在src為空的時候什麼也不顯示。目前想到了一個無恥但有效的解決辦法：找一張全透明的png，判斷src空的時候就給src賦這張png的路徑就好……

用onerror,然後綁定的方法里，獲得該元素讓它的opacity=0

img[src=""],img:not([src]){opacity:0;}

留下來的應該是個圖像佔位符吧！如果我沒記錯的話！至於如何讓它消失的話以後回來編輯。目前才開始學習CSS！

這個是谷歌高版本加的特性，當圖片的src載入失敗，就會這樣顯示，如果你的圖片帶有border-radius ,可以添加 overflow:hidden; 去除。