將圖像存儲在自定義數據屬性中

我有一個h3標記，它包裹着一個img標記和文本。它的工作原理，但我覺得這是一個非常糟糕的主意。例如：將圖像存儲在自定義數據屬性中

<h3> 
    <img src="dir/to/image.jpg" alt="icon" /> 
    Heading text 
</h3>

我讀到有關HTML5自定義數據屬性（data-*），然後我記得我看到一些網站的教程而回以前，使用自定義數據屬性存儲的圖標，並顯示他們旁邊文字（data-icon）。這正是我需要的。

問題是我無法弄清楚如何輸出圖像。我將如何做到這一點？可能與jQuery？

來源

2011-01-11 nowayyy

遠離您使用content: attr(data-icon)輸出圖像（other uses of the content property）

來源

2011-01-12 00:57:45

尼斯鏈接是正常的簡單用途。我喜歡你關於使用css屬性`content`的文章，尤其是你關於`content`在IE8 +環境中可行的一點。 – 2012-05-31 23:50:05

您是否在談論data: URL scheme？數據計劃允許您將正確的URL中的圖像數據：

<img src="data:image/png;base64,iVBORw0KGg[bunch of base64 omitted]Jggg=="/>

想必你可以在傳輸數據的URL存儲在data-icon屬性，然後使用jQuery將其複製到src當你需要它：

<h3 data-icon="data:image/png:base64,...."><img/>Dot!</h3>

，然後在別處：

$('h3').hover(
    function() { 
     $(this).find('img:first').attr('src', $(this).attr('data-icon')); 
    }, 
    function() { 
     $(this).find('img:first').attr('src', ''); 
    } 
);

當然，你可以在jQuery的東西添加<img/>標籤太多，但我試圖保持它爲說明目的而簡單。

據我所知，瀏覽器的支持，只要你的IE版本低於8

來源

2011-01-11 07:27:27

將圖像存儲在自定義數據屬性中

回答

相關問題