Setting <img> src to Base64-encoded image with Javascript is failing

Question

I'm trying to set <img> src with JavaScript, but the image is missing visually; it is empty. The image URL after running this code starts with "http://127.0.0.1:8080/%27" (I don't even know where this came from) instead of "data: image/png". The variable mySrc is set to a Base64-encoded image.

document.getElementById(id).src="'"+mySrc+"'";

This is what the URL looks like after setting it:

http://127.0.0.1:8080/%27data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4RMNRXhpZgAASUkqAAgAAAAQAAABAwABAAAAuAsAAAEBAwABAAAA9gkAAAIBAwADAAAAzgAAAAMBAwABAAAAAQAAAAYBAwABAAAAAgAAAA4BAgAfAAAA1AAAABIBAwABAAAAAAAAABUBAwABAAAAAwAAABoBBQABAAAA9AAAABsBBQABAAAA/AAAABwBAwABAAAAAQAAACgBAwABAAAAAgAAADEBAgALAAAABAEAADIBAgAUAAAAEAEAADsBAgAEAAAAUm9uAGmHBAABAAAAJAEAAHwBAAAIAAgACABJbWFnZSBjb252ZXJ0ZWQgdXNpbmcgaWZmdG9hbnkAAMDGLQAQJwAAwMYtABAnAABQaWNhc2EgMy4wAAAyMDA4OjA2OjA2IDEwOjM2OjEyAAQAAaADAAEAAAD...

No way of knowing without seeing more code, such as how mySrc is defined and populated. — Chad
– Chad, Commented Dec 21, 2011 at 19:29

ThinkingStiff · Accepted Answer · 2011-12-26 01:38:20Z

2

You should set src without apostrophes:

document.getElementById(id).src=mySrc;

edited Dec 26, 2011 at 1:38

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

answered Dec 21, 2011 at 19:27

abuduba

5,0637 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user592704 Over a year ago

But there is no host text at all; I checked :(

abuduba Over a year ago

what exactly contain mySrc? Where is the declaration ?

user592704 Over a year ago

It is an image which I converted to base64 and placed the base64 into mySrc var; It is showing fine but if I set src with JS, as I show it in my question, the image info starts with 127.0.0.1:8080/%27 and that makes my image "invisible" :( So I think where the 127.0.0.1:8080/%27 comes from because it doesn't allow to show image right?

user592704 Over a year ago

Thank to your notice I took off apostrophe(s) and all worked fine :)

Collectives™ on Stack Overflow

Setting <img> src to Base64-encoded image with Javascript is failing

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related