圖像占位符
[英]Image Placeholder
問題描述
我已經使用背景顏色定義了圖像標記，這樣如果沒有圖像，顏色應該顯示但仍然是破碎的圖像圖標顯示如何刪除它？
我不想通過添加jquery或任何框架使頁面笨重，我也不能添加任何類型的div到圖像，因為該網站幾乎完成。
只用javascript找到答案
function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
7 個解決方案
解決方案1
54 已采納 2012-01-24 13:17:23
你可以使用以下隱藏：
<img
src="my.png"
onerror="this.style.display='none'"
/>
如果未找到圖像，則可以顯示另一張圖像：
<img src="my.png" onerror="this.src = 'image-not-found.png';" />
解決方案2
7 2013-02-11 19:08:44
1x1空png的解決方案
function ImgError(source){
empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
source.src = "data:image/png;base64," + empty1x1png;
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
解決方案3
4 2012-01-24 14:19:50
一個簡單的解決方案是使用占位符空白圖像。 這通常用於精靈，但我認為你也可以使用它。
你做的是，你創建一個啟用透明度的1x1 px空白gif圖像，將“src”屬性指向blank.gif並通過css background-image屬性給出圖像。 因此，即使未找到背景圖像，也不會顯示斷開的鏈接圖像。
解決方案4
1 2012-01-24 13:18:09
這是某些瀏覽器的一個功能 - 據我所知，Firefox，Chrome和Safari在Internet Explorer顯示損壞的圖像圖標時沒有顯示任何內容。 沒有使用Javascript，我不相信你可以覆蓋這種行為。
解決方案5
1
瀏覽器會打破圖像圖標。 這不是你可以在代碼中改變的東西。 我想你會發現不同的瀏覽器處理丟失的圖像的方式不同。
您想要做的事情可能會有不同的處理，但......
樣式：
div.image-maybe-missing {
width: 300px;
height: 450px;
background-color: red;
background-image: url("/images/is-it-there.png");
}
HTML：
<div class="image-maybe-missing">
</div>
如果圖像不存在，這將為您提供一個帶紅色背景的空框。 div的寬度和高度需要與圖像的寬度和高度相匹配。
解決方案6
0 2017-08-10 13:50:08
嘗試使用this.remove（）刪除損壞的圖像占位符：
<div class="cell">
<p>
<img src="pic.png" onerror="this.remove();" />
</p>
</div>
我使用單元格div來保留布局。
解決方案7
0 2012-01-24 13:17:33
這是一個依賴瀏覽器的行為，但你無法做任何事情。 這里有幾個選項：
1）使用JavaScript向圖像添加一個onerror處理程序，當它無法通過使用css隱藏設置時隱藏它（你需要有一個包含div來應用背景顏色，因為背景顏色不會顯示圖像是否為hdden）。
要在不使用jQuery的情況下將錯誤處理程序應用於站點中的每個圖像並且不修改代碼，您可以執行此操作（將其放在頁面末尾的腳本中 - 如果它位於<head> ，則無法使用不能把它放在window.onload中，否則在圖像加載之前不會觸發）。
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
images[i].onerror = function() {
this.style.visibility = 'hidden';
}
}
2）在div上將圖像設置為css背景圖像，而不是使用<img>標簽。 它不是語義，但如果加載失敗則不會顯示損壞的圖像圖標，您仍然可以指定背景顏色和標簽（不是alt標簽）。
使用圖像作為復選框占位符
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.