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

Question

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?

Answer 1

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.

Answer 2

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,...);