Numerous occurrences of identical data URL image

Question

Numerous occurrences of identical data URL image

Is there a way to re-instantiate an already declared base64 data URL image without re-inserting the base64 code on the same page, preferably using CSS?

This is what I attempted:

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

html css base64 data-url

Answer 1

Answer №1

src is not a valid CSS property. You must utilize content instead...

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

See it in action: Live Demo

Answer 2

src is not a valid CSS property. You must utilize content instead...

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

See it in action: Live Demo

Answer 3

Answer №2

The CSS provided is inaccurate, you should set the data as the URL in the background-image property. This way, you will be able to reference it by class.

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

Answer 4

The CSS provided is inaccurate, you should set the data as the URL in the background-image property. This way, you will be able to reference it by class.

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

Answer 5

Answer №3

Give this a shot:

<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>Greetings</h1>
    <div class="wrapper">
    <br/>
</body></html>

Internet Explorer 8, Firefox 2 and 3, Safari, Mobile Safari (iPhone browsers), and Google Chrome all offer support for embedding binary image data in CSS files. However, this feature is not supported in IE 6 and 7.

For further information, check out:

Answer 6

Give this a shot:

<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>Greetings</h1>
    <div class="wrapper">
    <br/>
</body></html>

Internet Explorer 8, Firefox 2 and 3, Safari, Mobile Safari (iPhone browsers), and Google Chrome all offer support for embedding binary image data in CSS files. However, this feature is not supported in IE 6 and 7.

For further information, check out:

Answer 7

Answer №4

When adding images to a document, consider using base64 URLs as backgrounds in CSS if the images do not add semantic value.

If you need to use the base64 string on the server-side, store it in a variable and then insert it into the src attribute where necessary.

If server-side languages are not an option, JavaScript can be used, but it's advisable not to rely solely on scripts for content accessibility. You can use a snippet like this within a domready event:

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

Answer 8

When adding images to a document, consider using base64 URLs as backgrounds in CSS if the images do not add semantic value.

If you need to use the base64 string on the server-side, store it in a variable and then insert it into the src attribute where necessary.

If server-side languages are not an option, JavaScript can be used, but it's advisable not to rely solely on scripts for content accessibility. You can use a snippet like this within a domready event:

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

Numerous occurrences of identical data URL image

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular UI grid: Arranging numbers in a straight line at the decimal point

Adding HTML information into a MySQL database

The Jquery animate function is not compatible with the transform property

Transferring the "key" and "values" data from a JSON object to a perl script

What is the best way to position an element to the right of other elements within a div?

Utilizing a dropdown list in HTML to dynamically change images

Improving Vue Component on Navigation

Learn how to incorporate PHP7 code into your HTML file through the use of .htaccess configurations

Creating a webpage with a form is a simple process that involves utilizing both PHP and HTML

The anchor tag fails to function properly when nested within an image element inside an animated container

Incorporating Tailwind CSS into Vue transitions reveals an issue where the fade out effect

Shift div position when clicked and employ jQuery animations

The data-tooltip feature displays information as [Object object]

Is there a way to display my WhatsApp number, email, and location using icons?

Combining Bootstrap Vue: utilizing class names alongside HTML tags

Reorganizing the position of the HTML form method for processing PHP $_POST data

Stop Ag grid from automatically extending to the entire width of the screen

Achieving uniform cell height distribution in Foundation XY-grid using flexbox

Problem with <meta> tag occurring when initial-scale is adjusted

Adding Jquery content to HTML templates using Jinja2: A Simple Guide