Question

I’m using javascript to display images On HTML that comes encoded in base64 from WS .In few cases I get images in png, gif, jpg formats and want to display them in that same <img src= > tag.

$("#testImage").append("<img src=\"data:image/png;base64," +imgSRC+"">);

Where imgSRC is the base64 image.

1.How can I use one <img src> tag to display base64 images, and normal images on the same img src tag? or to change this tag when I now that returned imgSRC is jpg/png… image. for example when I get a return value about the image if it base64 or normal:
append("<img src=\"data:image/png;base64," +checkImageFormat(imgSRC)+"">);

How can I by the result of checkImageFormat(imgSRC) change the img src tag of current object?

Answer 1

I would suggest storing the “data:image/png;base64”-part in the database (or whatever the source may be) as well. That way you wouldn’t have to check.

Another solution might be something like:

$(function(){

    var $img = $('<img/>')
                   .attr({ src: 'data:image/png;base64,' + imgSrc })
                   .error(function(){
                        $(this).attr({ src: imgSrc }); 
                        //If we end up here the image couldn't be loaded 
                        //If so, we assume that its a jpeg/png/gif
                    });

    $("#testImage").append($img);

});