CODEWITHSUNDEEP
htmlimageapachebase64
serg
serg

Reputation: 111265

How to display base64 encoded image in HTML if it is located in a separated file?

I have base64 encoded image. If I put it right into html it works:

<img src="data:image/png;base64,..."/>

But when I put all that base64 content into a separated file, it doesn't:

<img src="image.base64.txt"/>

I tried changing extension to .png, but it doesn't help. Any ideas?

Upvotes: 11

Views: 23473

Answers (4)

Coldark
Coldark

Reputation: 445

You can simply take on server side approach and just print the file into the src part of the img tag like so:

<img src="<?php echo file_get_contents('some/path/image.txt');?>"

Where your image.txt contains i.e.: data:image/png;base64,...

Upvotes: 1

Hazard
Hazard

Reputation: 1

I did something similar for my final year project at university, i was using XML doc's to link to a page and show the images in a canvas element. I made it so the image was searched for a variable, then assigned the variable with base 64 encoded image like so:

xmlDoc=loadXMLDoc("test.xml");

x=xmlDoc.getElementsByTagName("image");
txt=x[1].childNodes[0].nodeValue;
document.write(txt);

var card1 = txt;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
    ctx.drawImage(img,0,0);
};
img.src= card1;

Upvotes: 0

Stan Rogers
Stan Rogers

Reputation: 2170

You would need to send the correct Content-type, Content-encoding and charset HTTP headers along with the file. Note that they are all part of the data: URI schema as well. You really should have a charset=utf-8 or similar clause between the content-type and the encoding:

url(data:image/png;charset=utf-8;base64,...);

Upvotes: 3

leonbloy
leonbloy

Reputation: 75906

You cannot do that, I believe. The first syntax corresponds to a pseudo protocol (scheme) data: that means that the data is not to be fetched from somewhere outside, but from the attribute string itself. As the "data" is in general binary, and the attribute is text, base64 is commonly used.

But when the data is fetched from outside the page (http server, or local filesystem), the data must come in raw (binary) form.

You could do it with some javascript work, of course.

Upvotes: 0

Related Questions