Should Setting an Image Src to Data Url Be Available Immediately

Should setting an image src to data URL be available immediately?

As no one has yet found any specifications about how this is supposed to behave, we will have to be satisfied with how it does behave. Following are the results of my tests.


            | is image data usable right  | does onload callback set after src
            |     after setting src?      |   is changed still get invoked?
------------+-----------------------------+-------------------------------------
Safari  5   |             yes             |                  yes                
------------+-----------------------------+-------------------------------------
Chrome  8   | **no** (1st page load), but |                  yes                
FireFox 3.6 |  yes thereafter (cached)    |                                     
------------+-----------------------------+-------------------------------------
IE8         |    yes (32kB data limit)    |                  yes         
------------+-----------------------------+-------------------------------------
IE9b        |             yes             |                 **no**              
------------+-----------------------------+-------------------------------------

In summary:

You cannot assume that the image data will be available right after setting a data-uri; you must wait for the onload event.
Due to IE9, you cannot set the onload handler after setting the src and expect it to be invoked.
The recommendations in "Playing it Safe" (from the question above) are the only way to ensure correct behavior.

If anyone can find specs discussing this, I will happily accept their answer instead.

Setting img src to a data url via work does not work in IE8?

Internet Explorer versions before 9 do not support data URLs. There's an alternative mechanism that apparently kind-of works.

edit — actually I'm wrong; IE8 will support them as long as they're less than 32KB.

edit again — ok I found the article I was thinking about concerning the "MHTML" thing from Microsoft.

Use Base64 String from URL in src tag of image

It is not working because you are treating a page featuring a Data URL string, as if were just another type of external link-able image asset. Unfortunately linking to an external asset works for image files, but Data URLs are meant as an alternative to an external link, and thus does not work in the same way.

In short, to display an image making use of a data URL string, you need put the actual data URL string as the src= value, in your case for example:

<img alt="" src="data:image/gif;base64,iVBORw0KGgo ...  " style="height:836px; width:592px">

Examples

Example HTML from Masinter, 1998 RFC 2397 - The "data" URL scheme:

<IMG SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7" ALT="Larry">

Is the need to preload in image alleviated if you use a base64 encoded image?

EDIT: Actually I may have been wrong apparently different browsers behave differently in this respect and although the image is available information such as it's width and height aren't necessarily. I assume this is because the browser functions that calculate this information are non-blocking and assume you are listening to onload.

So yes listen to the onload event to ensure that a dynamic image has been loaded by the users browser before attempting to use it.

Based on information from: Should setting an image src to data URL be available immediately?

Ignore the following advice (it remains to provide context to my answer):

By storing it as a variable you are in a way preloading it. All that happens when you preload an image is it's data is retrieved and stored. You have already stored it's data in a variable - what is there to preload?

Because variable assignment is synchronous the image will be available to your code that follows.

The whole point of preloading is the fact that an image is usually at a different location on the server and that loading of separate files is often asynchronous thus you ensure that your script waits for the image to be downloaded. By creating your image inline you are effectively storing it in the JavaScript file and it will be downloaded at the same time.

Drawing an image from a data URL to a canvas

Given a data URL, you can create an image (either on the page or purely in JS) by setting the src of the image to your data URL. For example:

var img = new Image;
img.src = strDataURI;

The drawImage() method of HTML5 Canvas Context lets you copy all or a portion of an image (or canvas, or video) onto a canvas.

You might use it like so:

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;

Edit: I previously suggested in this space that it might not be necessary to use the onload handler when a data URI is involved. Based on experimental tests from this question, it is not safe to do so. The above sequence—create the image, set the onload to use the new image, and then set the src—is necessary for some browsers to surely use the results.

Should Setting an Image Src to Data Url Be Available Immediately