什麼是包含沒有src的圖像的有效方法？

165

我有一個圖像，我會動態填充與src稍後用javascript，但爲了方便我想圖像標記存在頁面加載但只是不顯示任何東西。我知道<img src='' />是無效的，所以最好的方法是什麼？什麼是包含沒有src的圖像的有效方法？

2011-04-25 jhchen

這是一個比較古老的問題，但它是值得考慮的是與圖像沒有src本質上是沒有意義的，這就是爲什麼規範說image *必須有一個src指向一些嵌入式資源。如果你正在考慮的有效性和/或語義，你是通過完全省略圖像和事後添加的，因爲HTML不提供一種方式來指定將與以後的數據來填充一個佔位符圖像更好的服務。 – BoltClock 2016-02-16 09:22:14

在使用米卡Tuupola的延遲加載jQuery插件，它使用標記「」，所以從某種意義上講，你需要指向一個來源，但它並沒有要與src屬性來完成。 – iWillGetBetter 2016-10-05 06:51:32

209

雖然沒有有效的方法來省略圖片的來源，但是來源，不會導致服務器點擊。我最近與iframe s有類似的問題，並確定//:0是最好的選擇。不完全是！

從//開始（省略協議）會導致使用當前頁面的協議，從而防止HTTPS頁面中的「不安全內容」警告。跳過主機名不是必需的，但使其縮短。最後，端口號:0可確保無法提出服務器請求（根據規範，它不是有效的端口）。

這是我發現的唯一URL，它在任何瀏覽器中都沒有導致服務器點擊或錯誤消息。通常的選擇 - javascript:void(0) - 如果在通過HTTPS提供的頁面上使用IE7，將導致「不安全內容」警告。任何其他端口都會導致嘗試連接服務器，即使是無效地址。（有些瀏覽器會發出無效請求並等待它們超時。）

這已經在Chrome，Safari 5，FF 3.6和IE 6/7/8中測試過，但我期望它可以在任何瀏覽器，因爲它應該是殺死任何嘗試請求的網絡層。

來源

2011-04-25 05:51:21

+11

這個答案會導致你的防火牆警告你訪問端口0的例子。或者它可能會導致服務器安全日誌。建議'about：blank'的答案可能是更好的解決方案。 – 2013-01-22 15:47:24

這造成了一個破碎的圖像圖標爲我顯示。任何人看到這個？我正在使用最新的Firefox（27）。 – dmikester1 2014-02-11 20:00:20

這也失敗了w3c驗證器：錯誤值：0：對於元素上的屬性src img：無效主機：空主機。 – ysrb 2014-08-07 14:28:30

我建議動態地添加的元素，如果使用jQuery或其他JavaScript庫，這是很簡單的：

還看prepend和append。否則，如果你有一個這樣的圖像標籤，並且你想要驗證它，那麼你可能會考慮使用一個虛擬圖像，比如1px透明gif或者png。

來源

2011-04-25 05:34:41

+1這是最好的答案。如果圖像源是動態設置的，則應該動態添加整個元素。如果你不希望它在src設置之前可見，我想不出有什麼好的理由說明爲什麼元素應該在那之前。 – 2014-05-19 16:06:53

~~我有一段時間沒有這樣做，但我不得不經歷一次同樣的事情。~~

<img src="about:blank" alt="" />

是我的最愛 - 在//:0一個暗示，你會嘗試對端口零原始服務器的HTTP/HTTPS連接（tcpmux端口？） - 這可能是無害的，但我而不是反正。哎呀，瀏覽器可能會看到端口爲零，甚至不發送請求。但是，如果這可能不是您的意思，我寧願不要這樣指定它。

~~反正， about:blank的渲染實際上在我測試的所有瀏覽器中都非常快。我只是把它扔進W3C驗證器，它沒有抱怨，所以它甚至可能是有效的。~~

編輯：不要這樣做;它不適用於所有的瀏覽器（它會顯示一個'破碎的圖像'圖標，正如在這個答案的評論中指出的那樣）。使用下面的<img src='data:...解決方案。或者，如果您不關心有效性，但仍希望避免對服務器的多餘請求，則可以執行<img alt="" />而不使用src屬性。但是，這是無效 HTML所以仔細挑選。

~~測試顯示大量不同方法的頁面： http://desk.nu/blank_image.php - 提供各種不同的文檔類型和內容類型。~~ - 如下面的評論所述，使用Mark Ormston的新測試頁面：http://memso.com/Test/BlankImage.html

來源

2012-12-29 20:16:24 Uberbrady

這似乎比讓網絡層發出錯誤更清晰。 – 2013-01-22 15:41:02

至少你確定一個愚蠢的防火牆不會要求允許調用端口0 ... – 2013-01-22 15:46:11

值得一提的是，這顯示在Chrome瀏覽器（也可能是其他瀏覽器）上的「破碎的圖像」圖標 – user568458 2013-08-28 14:58:56

160

另一種方法是嵌入空白圖像。適合你的目標會做任何圖像，但下面的例子編碼GIF，這只是26個字節 - 從http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

編輯基於以下注釋：

當然，你必須考慮你的瀏覽器支持要求。不支持IE7或更低版本是值得注意的。 http://caniuse.com/datauri

來源

2013-01-01 23:47:59 Isius

好主意！然而，對我而言，這會殺死圖像元素 - 如果任何人需要'img'元素的其他方面來顯示例如背景和邊框，請嘗試'src =「data：image/gif; base64，R0lGODlhAQABAIAAAP /// wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw ==」'這取自1px x 1px透明gif我讓Photoshop透過http：//www.base64- image.de/ – user568458 2013-08-28 15:06:10

您可能需要考慮使用數據URI內聯您的資源：http://www.mobify.com/blog/data-uris-are-slow-on-mobile/ – shawnjan 2013-09-01 19:08:39

此選項的可行性取決於您必須在哪些瀏覽器上支持：http：//caniuse.com/datauri – 2013-11-06 00:37:55

我個人使用的about:blanksrc並通過img元素的透明度設置爲0處理斷開的圖像圖標。

來源

2014-05-03 17:13:38 Miguel

現在，這是骯髒的！ – mystrdat 2014-12-10 14:40:41

@mystrdat：謹慎地闡述爲什麼它很髒？接受的答案，使用「//：0」仍然給了我一個破碎的圖像圖標加上一個奇怪的永不停止的請求在Firefox上。使用作爲佔位符的單像素base64 png替代品也有很多投票，給我帶來了麻煩，無論是否指定高度和寬度。這是我找到的最乾淨的方式，可以在沒有任何不必要的請求並通過所有短消息和驗證的情況下實現我的目標。 – Miguel 2015-02-12 19:12:35

以上所有解決方案都非常愚蠢，包括一個可以接受的解決方案，一旦我獲得更多時間，我會做出新的答覆。 – mystrdat 2015-02-12 21:17:02

，如果你繼續src屬性空的瀏覽器會發送請求到當前頁面的URL 隨時添加在src屬性1 * 1透明IMG如果不希望任何URL

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

來源

2015-01-03 11:17:05

這將在某些瀏覽器中顯示爲黑點。 – tomasz86 2015-07-26 18:31:33

哪些瀏覽器？ – 2015-07-28 06:26:59

當然IE8和老版本的Firefox根據http://stackoverflow.com/questions/9126105/blank-image-encoded-as-data-uri#comment33438865_19891866 – tomasz86 2015-07-29 08:57:23

寫在註釋，這種方法是錯誤的。

~~之前我沒有找到這個答案，但acording到W3 Specs有效空src標籤將是一個錨鏈接#。~~

~~示例：src="#"，src="#empty"~~

~~頁驗證成功並沒有額外的要求製成。~~

來源

2015-01-21 21:17:58 iGidas

工作我懷疑這個，所以我檢查了我的服務器日誌，你是正確的。我猜想瀏覽器試圖將主頁面解釋爲圖片並且失敗，但這對於查看控制檯日誌消息的開發人員來說很重要。 – Liam 2015-02-09 15:43:35

有沒有反對這種方法的爭論？它如何跨瀏覽器？ – tremby 2015-03-13 19:20:18

+16

我已經看到Firefox和Chrome在使用這種方法時發出第二個請求，所以我不會推薦它。 – Marius 2015-04-17 14:13:26

我發現，使用：

<img src="file://null">

不會讓一個請求，正確驗證。

瀏覽器將簡單地阻止對本地文件系統的訪問。

但也有可能，例如顯示在控制檯登錄Chrome的一個錯誤：

Not allowed to load local resource: file://null/

來源

2015-03-20 04:34:17 tenkod

謹慎解釋downvote？請注意，我不推薦使用這種方法只是提供一個討論的案例。它能夠滿足問題的要求，正確驗證並且不會提出其他請求。 – tenkod 2015-08-28 18:15:41

使用一個真正的空白，有效和高度兼容SVG，在此基礎上article：

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

與SVG一樣，它的默認大小爲300x150像素，但您可以在img元素的默認樣式中使用該元素，正如您在實際實現中可能需要的那樣。

來源

2016-05-26 00:11:10 mystrdat

感謝您更新您的答案，但是我懷疑它的兼容性比其他數據 - uri解決方案更糟糕，因爲您使用的svg在IE9之前不兼容。幸運的是，這是一段時間，因爲我不得不支持傳統的IE瀏覽器，但它仍然與一些人有關。 – funkylaundry 2016-06-07 10:35:13

它應該以IE9的方式工作。 – mystrdat 2016-06-07 12:53:04

但是，這是否會遇到與本文中相同的問題？ http://dev.mobify.com/blog/data-uris-are-slow-on-mobile/。我在考慮使用css img [src =「about：blank」] {opacity：0}解決方案的選項是最好的。或者，如果舊版瀏覽器不支持CSS級別的選擇器，只需給img標籤添加一個類似「load-in」的類，或者其他的東西。更好的是，給它一個類，使用JavaScript來交換數據-Src，然後設置一個加載函數給圖像，使其在加載時淡入淡出。您還可以設置一個微調器在加載時顯示。看起來很專業。 – 2016-09-17 13:41:55

簡單地說，就像這樣：

<img id="give_me_src"/>

來源

2016-09-08 07:30:31 anmml

根據[規範]（https://dev.w3.org/html5/spec-preview/the-img-element.html#attr-img-src）不是一個好主意：_src屬性必須存在，並必須包含一個有效的URL ... _ – 2016-10-16 19:17:26

@MichaelLitvin它在Chrome中運行良好 – anmml 2016-10-18 19:22:43

也許它在Chrome中運行良好，但它**將**在HTML驗證中拋出錯誤，它不是W3有效的HTML ... – EhsanT 2016-11-25 12:38:40

我發現，簡單地設置在src爲空字符串，並添加規則，以你的CSS隱藏斷開的圖像圖標工作得很好。

[src=''] { 
    visibility: hidden; 
}

來源

2016-09-16 21:35:09

[ ng-src =''] { visibility：hidden; } 如果您在angularjs中使用ng-src指令 – 2018-01-31 20:17:41

<img src="invis.gif" />

凡invis.gif是單像素透明GIF。這在未來的瀏覽器版本中不會中斷，並且自90年代以來一直在傳統瀏覽器中工作。

PNG應太，但在我的測試中，GIF爲43個字節，PNG爲167個字節，因此GIF贏了。

p.s.不要忘記alt標籤，驗證者也喜歡它們。

來源

2017-07-05 12:38:16 franki

大廈關閉本·布蘭克的回答，我得到這個在W3的驗證驗證的唯一辦法是，像這樣：

<img src="/./.:0" alt="">`

來源

2017-10-05 13:49:49

什麼是包含沒有src的圖像的有效方法？

回答

相關問題