Home > Back-end >  How to display in a curent page an external image in base64 (atob)
How to display in a curent page an external image in base64 (atob)

Time:10-20

I am actually working in the "Legal Mentions page" of client site. He would like to display it under a full image (not text) hostend in a external site, but encoded in base64 (not a simple link https://...).

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

This is not working...

<a href="#" onl oad='this.href=atob("aHR0cHM6Ly9jZG4uc3N0YXRpYy5uZXQvSW1nL3RlYW1zL3RlYW1zLWlsbG8tZnJlZS1zaWRlYmFyLXByb21vLnN2Zz92PTQ3ZmFhNjU5YTA1ZQ==")'></a> -->

This works but it's a link, I don't want this but a loading.

I try many things and nothing works for me.

Could someone just put me on a track.

Thank you !

CodePudding user response:

data:image/png;base64,aHR0cHM6Ly9jZG4uc3N0YXRpYy5uZXQvSW1nL3RlYW1zL3RlYW1zLWlsbG8tZnJlZS1zaWRlYmFyLXByb21vLnN2Zz92PTQ3ZmFhNjU5YTA1ZQ==

Is a data URI. That means that it should contain actual (image) data and not a link to an image. Right now it contains a base64 encoded link. Take the image that you want to display and convert it (for example via an online converter) to Base64 and insert the Base64 string in your data URI.

Example (showing a red dot, example from Wikipedia):

<img src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" alt="Red dot" />

CodePudding user response:

I solved my problem.

1/Distant server
Instead of calling my external image by url and trying to convert it in base64 from my website, I created a .txt file which contains already the image encoded (like mentionned by jps).

2/Back to my site
I just called the .txt distant file with file_get_contents function :

<php

$external_image_base64 = file_get_contents("https://exemple.com/images/myfilename.txt");
img src="<php echo $external_image_base64; ?>"

?>

Now everytime I need to update my image, I just need to convert the new one and paste it on the distant file.

  • Related