Stockage d'images dans des attributs de données personnalisés

Question

J'ai un h3 tag qui entoure un tag img et le texte. Cela fonctionne mais je pense que c'est une très mauvaise idée à faire. Exemple:

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

je lisais sur les attributs de données HTML5 personnalisé (data-*), puis je me suis souvenu que j'ai vu un tutoriel sur un certain site Web il y a un moment en arrière qui utilisait des données d'attributs personnalisés pour stocker les icônes et les montrant à côté le texte (data-icon). C'est exactement ce dont j'ai besoin.

Problème: je n'arrive pas à comprendre comment sortir l'image. Comment ferais-je cela? Peut-être avec jQuery?

Answer 1

Vous utilisez content: attr(data-icon) à la sortie de l'image (other uses of the content property)

Answer 2

Parlez-vous du schéma d'URL data:? Le système de données vous permet d'intégrer les données d'image à droite dans l'URL:

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

On peut supposer que vous pouvez stocker l'URL de données dans un attribut data-icon puis copiez-le à src en utilisant jQuery quand vous en avez besoin:

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

et ailleurs:

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

Bien sûr, vous pouvez ajouter le tag <img/> dans les choses jQuery aussi, mais je suis en train de le garder simple à des fins d'illustration.

AFAIK, le soutien du navigateur est correct pour des utilisations simples aussi longtemps que vous restez loin des versions IE inférieur à 8.