несколько экземпляров одного и того же URL-адреса данных - PullRequest
Новая
       20

несколько экземпляров одного и того же URL-адреса данных

10 голосов
/ 29 октября 2010

Как вы восстанавливаете уже объявленное изображение URL-адреса base64 без необходимости повторной вставки кода base64 на той же странице? (Желательно с css)

Я пытался: 

<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 ]

5 голосов
/ 29 октября 2010

src не является допустимым свойством CSS. Вам нужно использовать content для этого ... 

img.wink  {
  content: url(data:image/gif;base64,BLAH_BLAH_BLAH);
  height: 15px;
  width: 15px;
}

Работает: Live Demo

2 голосов
/ 29 октября 2010

Если CSS неправильный, сделайте data URL в background-image, тогда вы можете сослаться на него по классу. 

<html>
<head>
    <style type="text/css">
        div.wink  
        {
            width:15px; 
            height:15px;
            background-image: url('data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=');
        }
    </style>
</head>
<body>
    <h1>Hello</h1>
    <div class="wink"></div>
    <br/>
    and just to test my sanity 
    <div class="wink"></div>.
</body>
</html>
1 голос
/ 29 октября 2010

попробуйте это: 

<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>

IE 8, Firefox 2 и 3, Safari, Mobile Safari (браузеры iPhone) и Google Chrome поддерживают встроенные двоичные данные изображений в файлах CSS.IE 6 и 7 НЕ.

подробнее здесь: http://mark.koli.ch/2009/07/howto-include-binary-image-data-in-cascading-style-sheets-css.html

0 голосов
/ 29 октября 2010

если изображения не привносят семантику в документ, вы можете просто определить URL base64 как фон элемента, не используя <img> от CSS

В противном случае вы можете сохранить строку base64 в серверной переменной, а затем поместить src, поместив эту переменную в нужное место

если вы не можете использовать серверный язык, вы все равно могли бы использовать javascript (но лучше не полагаться на скрипты для обеспечения доступности контента), просто используйте сниппет на domready, например: 

var img = document.getElementsByTagName('img'),
    len = img.length;
while (--len) { 
    if (-1 < img[len].className.indexOf('wink'))
        img[len].src = 'data:image/.gif;base64,..."; 
}
...