In any browser, if you see an image, you can right-click it and click "Save As" to download it.

I'm trying to make a button that downloads an image

The download button should download the above image, barcode.

I'm using react, not sure if this is relevant to the answer.

I read that you can use the <a/> tag with the download attribute, however, I'm using Firefox and it redirects me to hosting A page with a barcode image and the download window will not open:

The code is very simple, as shown below:

<a href='https://barcode.tec-it.com/barcode.ashx?data=${product.barcode}&code=&multiplebarcodes=true&backcolor=%23ffffff&quietzone=10&quietunit=Px&size=Small' download>click me</a>

From MDN documentation:

Downloading only works with same-origin URLs, or blob: and data: plan.

I want to achieve this, how should I do it? I don't own the server hosting the image.

Can we do this in 2023?

Other issues are mixing between local images and images hosted on other servers. So I thought I'd create this thread for those of you who are only interested in images on third party servers. - So we are all front-end here, there is no back-end related stuff.