Question

我有h3标记包含img标记和文本。它有效，但我觉得这是一个非常糟糕的主意。例如：

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

我正在阅读HTML5自定义数据属性（data-*），然后我记得我前段时间在某个网站上看过一个教程，该教程使用自定义数据属性存储图标并在文本旁边显示（data-icon）。这正是我所需要的。

问题是我无法弄清楚如何输出图像。我该怎么做？可能与jQuery？

Answer 1

您使用content: attr(data-icon)输出图像（other uses of the content property）

Answer 2

您是在谈论data:网址计划吗？数据方案允许您将图像数据直接嵌入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/>标签，但是为了说明的目的，我试图保持简单。

AFAIK，只要您远离低于8的IE版本，浏览器支持就可以用于简单的用途。

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

2 个答案: