将图像存储在自定义数据属性中

我有一个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

将图像存储在自定义数据属性中

回答

相关问题