Web應用程序中的圖像

Question

我正在處理Web應用程序，並使用img標記（<img...>）。

當src屬性爲空時，它顯示紅色的x圖形，表示沒有圖像。

有什麼辦法可以隱藏那個紅色的X圖標嗎？

Answer 1

如果將src設置爲空字符串，則不需要添加img標籤。

Answer 2

沒有src屬性的<img />標記爲invalid HTML。如果您不想顯示圖像，則根本不會輸出<img />標籤。

如果一定要輸出的圖像標籤，從而打破您的HTML（我不會鼓勵這種），你可以隱藏在大多數瀏覽器[X]與下面的CSS樣式之一：

1. <img style="visibility: hidden"/>這隱藏圖像，但仍然有它佔用空間在頁面
2. <img style="display: none"/>從頁面移除圖像，使其不佔用佈局空間

其他阿爾特實質是實際鏈接到一個不會被看到的圖像。這種經典的例子是使用1像素透明的gif圖像。圖像將不可見，但它會影響頁面佈局。

Answer 3

如果你不希望打印的圖像，但顯示在屏幕，你可以使用CSS媒體類型上：

<style> 
@media print 
    { 
    img.noprint {visibility: hidden} 
    } 
</style> 

，然後添加一個類你不想打印

的所有圖片

<img class="noprint" .../>