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