JavaScript - download encoded image

Question

I am trying to force a download of an image and I always get failed - network error on that

here is my code

function download(filename: string, text: any) {
    var element = document.createElement('a');
    if (filename.includes('.csv')) {
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    } else {
        element.setAttribute('href', 'data:image/png;base64,' + encodeURIComponent(text));
    }
    element.setAttribute('download', filename);
  
    element.style.display = 'none';
    document.body.appendChild(element);
  
    element.click();
  
    document.body.removeChild(element);
}
  
export const downloadApi = {
    getFile(payloadUrl: string = "",
            payload: string = "",
            fileName: string = "",
            fileExt: string = "",
            headers?: any) {
        return instance.get(`${payloadUrl}?${payload}`, {
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json, text/plain, */*"
            }
        }).then((response) => {
            if (!response.data) {
                return response.status;
            }
            download(fileName, response.data)
        })
    }

and this is how the response looks like

and the result