嵌入在HTML文件

底部的base64編碼的圖像我有一個HTML文件中像這樣：嵌入在HTML文件

<html> 
<body> 
<p>Some text...</p> 
<img src="data:image/png;base64 
<!-- Some really ugly base64 --> 
"> 
<p>Some text...</p> 
</body> 
</html>

默認情況下，Base64編碼的文件真的雜波的HTML文檔。
我想知道，如果有一種方法可以將圖像鏈接到HTML文件中的其他位置，而不是直接在重要內容之間粘貼base64，以提高原始文件的可讀性。我知道，這可以通過某種JavaScript解決方案實現，但我不希望使用它。

來源

2015-07-02 stunningpotato

我假設你有一個緊迫的理由不在外部資源中的圖像？因爲這有很多優點，HTML文件的可讀性就是其中之一。 –

是的。我有一個Markdown文檔，它被轉換爲HTML。由於Markdown支持HTML標籤，嵌入標籤沒有問題。爲簡化起見，我希望只有一個Markdown-File，沒有任何（可能中斷）依賴關係 – stunningpotato

受this answer的啓發，可以使用通用content屬性通過CSS指定圖像內容。

我不知道哪些瀏覽器支持這種行爲，儘管我非常懷疑大多數現代瀏覽器都支持這種行爲。

例從答案修改：

<img src="#" class="myImage" /> 

<style type="text/css"> 
    .myImage { 
    content: url('data:image/gif;base64,R0lGODlhEAAQALMPAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAA8ALAAAAAAQABAAQAQ78EkJqp10LaB759sDVh4ZiqVVTqC3om6smVvcAmz74Zioz7zMRmfC/WTAGXI0Ws5gtc+HhXz2fJagJAIAOw=='); 
} 

</style>

體內is illegal in HTML4, and dubious in HTML 5.然而配售風格的元素，每一個我知道的瀏覽器支持它。

請記住，在HTML文檔中嵌入圖像會帶來一些巨大的負面影響，最突出的是緩存能力受損。

來源

2015-07-02 15:10:35

緩存能力在這種情況下並不重要，因爲文檔停留在用戶hdd上......謝謝！ – stunningpotato

嵌入在HTML文件

回答

相關問題