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

I have a h3 tag thats wrapping a img tag and the text. It works but I feel like its a really bad idea to do. Example:

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

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

I was reading about HTML5 custom data attributes (data-*) and then I remembered that I saw a tutorial on some website a while back ago that was using custom data attributes to store the icons and showing them beside the text (data-icon). This is exactly what I need.

我正在阅读关于HTML5自定义数据属性(data- *)然后我记得我前段时间在一些网站上看过一个教程,它使用自定义数据属性来存储图标并在文本旁边显示它们(数据图标) 。这正是我所需要的。

Problem is I can't figure out how to output the image. How would I do this? Possibly with jQuery?

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

2 个解决方案

#1

You use content: attr(data-icon) to output the image (other uses of the content property)

您使用内容:attr(data-icon)输出图像(内容属性的其他用途)

#2

Are you talking about the data: URL scheme? The data scheme allows you to embed the image data right in the URL:

你在谈论数据:URL方案?数据方案允许您将图像数据直接嵌入URL中:

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

Presumably you could store the data URL in a data-icon attribute and then copy it to src using jQuery when you need it:

大概你可以将数据URL存储在data-icon属性中,然后在需要时使用jQuery将其复制到src:

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

and then elsewhere:

然后在其他地方:

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

Of course you could add the <img/> tag in the jQuery stuff too but I'm trying to keep it simple for illustrative purposes.

当然你也可以在jQuery的东西中添加将图像存储在自定义数据属性中标签,但我试图保持简单以便于说明。

AFAIK, browser support is okay for simple uses as long as you stay away from IE versions less than 8.

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

#1