I am new to javascript and coding htmls. I am working on a side project and I’m stuck. I have a html file that contains an image(let’s call it file1) and I would like to render file1 in another html file called file2. By render I mean display the image contained in file1 in file2. I researched and found stuff like using dataURIs and read a lot about it but it didn’t work. I found an encoder online that encoded my file1 to a base 64 and inserted it in my page like this:
<img src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPHRpdGxlPk1hdGhKYXggTGF0ZXggRGlzcGxheSBUZXN0IFBhZ2U8L3RpdGxlPgoKPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiIHNyYz0iaHR0cHM6Ly9jMzI4NzQwLnNzbC5jZjEucmFja2Nkbi5jb20vbWF0aGpheC9sYXRlc3QvTWF0aEpheC5qcz9jb25maWc9VGVYLUFNUy1NTUxfU1ZHIj4KPC9zY3JpcHQ+CjwvaGVhZD4KPGJvZHk+ClxbKHRhbih4KSoyeCszKV4yICogXGludCAoeCkgZHhcXQoKPC9ib2R5Pgo8L2h0bWw+Cg==" width="400" height="100" alt="Slide 2">
It didn’t work and I don’t know why. Does any one know any solution for this?
As sachleen said, your base64 decodes to an HTML page, not an image. And that HTML page does not contain any bitmap images (the
<img>tag only works with bitmap images like jpg, png and gif; a web page is never an image):That’s JavaScript code generating an SVG (vector) image. Add the same
<script>tag to the other file, inside<head>, and the body text where appropriate. It works on file1, so it should work on file2 as well.