Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How can I use a base64 encoded image in a text file as an HTML image?

I have some images saved as base64 blobs in a remote storage. We will look at one in particular:

llorkcir.txt

data:image/jpeg;base64,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

This file is saved at https://eqlotw86esektkgo.public.blob.vercel-storage.com/llorkcir-5AJYcJtWz78QClo0WH0QUB4V1RJ6bQ.txt. I want to display the contained image in HTML.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I thought it would be as simple as this:

const myURL = "https://eqlotw86esektkgo.public.blob.vercel-storage.com/llorkcir-5AJYcJtWz78QClo0WH0QUB4V1RJ6bQ.txt"

// I tried requesting the url and attaching the result to the image
const getImage = async() => {
const image = await fetch(myURL, {method: "GET"});
document.getElementById("gotchu").src = image.body;
console.log(image)
}
getImage()

// I also tried just the url.
document.getElementById("getchu").src = myURL;
<h1>Attempt #1</h1>
<img id="getchu" />

<h1>Attempt #2</h1>
<img id="gotchu" />

…but that did not work. How do I do this?

>Solution :

For your fetch you will want to get the text() from the response.

const myURL = "https://eqlotw86esektkgo.public.blob.vercel-storage.com/llorkcir-5AJYcJtWz78QClo0WH0QUB4V1RJ6bQ.txt"

const getImage = async() => {
  const image = await fetch(myURL, {
    method: "GET"
  });
  const data = await image.text();
  document.getElementById("gotchu").src = data;
}
getImage()
<h1>Attempt #2</h1>
<img id="gotchu" />
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading