圖像佔位符

我已經定義了圖像標籤的背景顏色，以便如果沒有圖像的顏色應該顯示，但仍然破碎的圖像圖標顯示如何刪除該圖像？圖像佔位符

我不想通過添加jquery或任何框架使頁面龐大，也不能添加任何類型的div到圖像，因爲該網站幾乎完成。

發現只有JavaScript

function ImgError(source){ 
source.src = "/images/noimage.gif"; 
source.onerror = ""; 
return true; 
} 

<img src="someimage.png" onerror="ImgError(this);"/>

來源

2012-01-24 Pradyumna Challa

您可以指定'alt'屬性，例如' my cute cat '，那麼替代文本將以您應用的背景顏色顯示。 –

答案你可以隱藏，使用下列內容：

<img 
    src="my.png" 
    onerror="this.style.display='none'" 
/>

可以顯示其他的圖像，如果沒有找到圖片如下：

<img src="my.png" onerror="this.src = 'image-not-found.png';" />

來源

2012-01-24 13:17:23

我建議可見性：隱藏而不是顯示：如果您不希望它影響佈局，則不顯示。此外，請注意我的意見，如果您需要在圖像無法加載時顯示背景色，請將其封裝在div中。 –

@NickLockwood你這也是一種方式 –

我不能添加任何手動的圖片標籤有很多標籤在網站周圍。 –

這是一個依賴於瀏覽器的行爲，但對此無能爲力。這裏有幾個選項：

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標籤）。

來源

2012-01-24 13:17:33

這是某些瀏覽器的功能 - 據我所知，Firefox，Chrome和Safari沒有顯示任何內容，而Internet Explorer顯示的圖片圖標很碎。使用Javascript，我不相信你可以重寫這種行爲。

來源

2012-01-24 13:18:09 MassivePenguin

至少在FF中，你可以用'img：-moz-broken {-moz-force-broken-image-icon：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的寬度和高度需要匹配圖像的寬度和高度。

來源

2012-01-24 13:24:37

但是當原始圖像時IE仍然會顯示一個紅色的「X」未找到。 – acme

一個簡單的解決方案是從字面上使用佔位符空白圖像。這通常用於精靈，但我認爲你也可以使用它。

你要做的是，你創建一個1x1 px的空白gif圖像，啓用透明度，將「src」atrribute指向空白。gif並通過css background-image屬性給出圖像。因此，即使未找到背景圖像，也不會顯示損壞的鏈接圖像。

與1x1的空白PNG

來源

2012-01-24 14:19:50 Ege

你應該知道，雖然這有一個小缺點。額外的圖像請求的課程。您可以儘可能利用精靈，從而減少圖像請求的總數。 – Ege

我會創建1px 1px的base64表示並將其存儲在JavaScript中。這將消除網絡請求。 Base64圖像效率稍低，但是在1px×1px的情況下，這並不重要。另外，如果你使用一個精靈，你可以選擇一個你想使用的像素，因爲無論如何都會下載它，如果你走這條路線。我發佈這個答案如下。 – 2012-11-17 18:09:14

解決方案

 function ImgError(source){ 
      empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII="; 
      source.src = "data:image/png;base64," + empty1x1png; 
      source.onerror = ""; 
      return true; 
     } 

     <img src="someimage.png" onerror="ImgError(this);"/>

來源

2013-02-11 19:08:44

嘗試this.remove（）去除碎圖像佔位符：

<div class="cell"> 
    <p> 
    <img src="pic.png" onerror="this.remove();" /> 
    </p> 
</div>

我用電池的div保存佈局。

來源

2017-08-10 13:50:08 MannyC

回答

相關問題