Comment ré-instancier une image d'URL de données de base64 déjà déclarée sans avoir à ré-insérer le code de base64 sur la même page? (De préférence avec CSS)
J'ai essayé: P>
<html><head>
<style type="text/css">
img.wink { width:15px; height:15px;
src:"data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=";
}
</style>
</head><body>
<h1>Hello</h1>
<img class="wink"/>, and just to test my sanity <img width="15px" height="15px" src="data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=" alt=";)"/>.
</body></html>
4 Réponses :
que CSS n'est pas correct, apportez les données l'URL dans le arrière-fond-image , vous pouvez y réfrir par classe. < Pré> xxx
Vous pouvez utiliser n'importe quel élément, mais utiliser un fond sur une image n'est pas ce dont il a besoin. Pour réutiliser cette image unique, il doit être fait à travers CSS.
@Dustin Non, vous n'atteignez pas ma dérive. Voir ma réponse s'il vous plaît.
J'aime l'approche, mais je n'ai pas pu obtenir cela pour travailler sur le navigateur croisé. Je préférerais utiliser cela que BG Image.
@Dustin Très bonne réponse presque, mais Joshes est mieux à la recherche (sera accepté si je parviens à le faire fonctionner)
@Glass Il semble que ma solution ne fonctionnera pas dans la plupart des navigateurs. J'utilise Chrome et cela a fonctionné là-bas alors j'ai supposé que ce serait bien dans Firefox et éventuellement ie9. Je crains que l'utilisation d'images d'arrière-plan soit la solution la plus conviviale entre navigation croisée.
@JOSH, je n'ai pas vu beaucoup sur la compatibilité. Dommage, beaucoup plus élégant.
Si des images n'apportent pas sémantique au document, vous pouvez simplement définir l'URL de base64 comme fond d'un élément sans utiliser sinon vous pouvez enregistrer la chaîne de base64 Dans un variabile côté serveur, placez la SRC placant cette variable partout où elle nécessite si vous ne pouvez pas utiliser de langue côté serveur, vous pouvez toujours utiliser JavaScript (mais c'est mieux non à compter sur les scripts pour l'accessibilité du contenu. ), il suffit d'utiliser un extraipli sur Domready, comme: par CSS
Essayez ceci:
<html><head>
<style type="text/css">
div.wrapper {
background-image: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
width:15px; height:15px;
}
</style>
</head><body>
<h1>Hello</h1>
<div class="wrapper">
<br/>
</body></html>
Ça fonctionne: Démo en direct src n'est pas une propriété CSS valide. Vous devez utiliser contenu pour cette ...
Je crois que cela fonctionne, mais dans quel navigateur (je suis fou)? J'utilise Firefox dans Ubuntu Lynx.
@Glassghost j'utilise chrome
C'est drôle (actuellement) Chrome travaille avec cette question, tandis que Firefox a Stackoverflow.com/questions/2710284 Travailler. Je veux vous donner cette coche si mal !!! Si seulement Mozilla brillait à ce moment
@Glass haha, mais ce n'est vraiment pas drôle - pourquoi ces putain de navigateurs ne peuvent-ils pas venir ?!
@JOSH Si seulement la pile débordement me permettrait de vous donner une demi-coche, peut-être que Mozilla résoudra cela dans une mise à jour.
@Glass Je ne pense pas que ce soit une bonne idée de marquer cela comme réponse. Merci pour le représentant, mais je suis plus préoccupé par quelqu'un à la recherche de cette solution à l'avenir. À mon avis, ce n'est pas une "solution" puisque elle ne fonctionne que dans un navigateur.
@Josh Roger que, peut-être que nous pourrions peut-être certains comment signaler cela à Mozilla? J'ai juste eu une nouvelle mise à jour;)
@Glass ouais Il est définitivement une partie de la spécification CSS3 (toujours un brouillon de travail à ce stade): w3.org/tr/css3-content/#insserting3
Josh, je t'ai fourré et je l'ai fait plus comme une balise IMG normale, que pensez-vous? jsfiddle.net/resistDesign/jgsn55rs