Solution Provided for : issue #2 File Saver npm Package not working after hosting

[ItsAnkitPatel]

Inside utils/index.js update the downloadImage function

export async function downloadImage(_id, photo) {
  const securePhotoUrl = photo.replace('http://', 'https://');
  const imageBlob = await fetch(securePhotoUrl)
    .then((response) => response.arrayBuffer())
    .then((buffer) => new Blob([buffer], { type: "image/jpg" }));
  const url = URL.createObjectURL(imageBlob)
  FileSaver.saveAs(url, `download-${_id}.jpg`);
}

This worked for me.

The error message I was facing is due to the "Mixed Content" policy enforced by modern browsers. This policy disallows loading insecure (HTTP) content from a secure (HTTPS) site.

Your site is served over HTTPS, but it's trying to load an image from an HTTP URL. This is what's causing the error.

To fix this, you need to ensure that all resources are loaded over HTTPS.