How to download png images by url in javascript or react?

Question

Im trying to download an image, but when i click the download button, the image is just showed, im redirected to the link and it appears. im using this function, where i pass the url as a parameter. This function works to csv extensions, binaries too, but images its not working.. i dont know what to do =(

export function downloadUrl(url: string, filename?: string) {
  const element = document.createElement("a");

  element.setAttribute("href", url);

  if (filename) {
    element.setAttribute("download", filename);
  }

  element.style.display = "none";
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

<Button onClick={downloadUrl(ImageUrl)}/>

Answer 1

You can use FileSaver

FileSaver.saveAs("https://<yourimage>", "<image-name.jpg>");