Hi, I'm trying to convert a base64 encoded image sent from my server to the client into an object url so i can display it on the client.

Here is the code that is in charge of fetching the base64 string from the server :

async function fetchImage() {
    return new Promise(async (resolve, reject) => {
        await fetch('http://localhost:3001/api/image')
        .then((response) => {
            if (!response!.ok) {
                throw new Error('Network response was not ok');
            }
            return response!.json();
        })
        .then(image => {
            image = "data:image/png;base64," + image;
            console.log(image);
            const blob = new Blob([image], {type: 'image/png'});
            const url = URL.createObjectURL(blob);
            resolve(url);
        });
    });
}

When I open the object url it creates inside a new tab i get the following message : The image “blob:http://localhost:3000/c0c459e4-f5e1-4668-b263-c2ccb58fd7bf” cannot be displayed because it contains errors.

Attached is the base64 string. I've tried adding data:image/png;base64 at the start of the string and still the same problem.