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.
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?
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" />