Loading images using fetch
and promises
If you use fetch to load images you may want to show them on the page or use them in other applications.
const loadImage = (url) => {
return new Promise((resolve) => {
fetch(url)
// Extract as a blob
.then((resp) => resp.blob())
.then((blob) => {
return URL.createObjectURL(blob);
});
});
}
// then you can use the Object URL as you do any other URL.
<img src="placeholder.jpg" />
<script>
const img = document.querySelector('img');
loadImage('myimage.jpg').then(url => {
img.src = url
})
</script>
If you want to use in other cases, you want a fully loaded img
element. You probably should wait for the image to be loaded as it can take a
period of time to load up the image blob into memory.
const loadImage = (url) => {
return new Promise((resolve) => {
fetch(url)
// Extract as a blob
.then((resp) => resp.blob())
.then((blob) => {
// Image element to load the image into. Could be passed as a variable if you already have an element to load into.
const img = document.createElement("img");
// Use blob as object url
img.src = URL.createObjectURL(blob);
// wait for image to be loaded before resolving the promise
img.onload = () => {
resolve(img);
};
});
});
};