when i click download image, the image is opened in new tab

[JasirMJ]

[aautio]

@JasirMJ would you elaborate this. What browser are you using? Are you clicking the download-icon on the top right corner? I'm unable to reproduce this issue with the latest Chrome, Edge, Safari and Firefox.

[JasirMJ]

I tryed on chrome and mozilla, Not able to download image in single click. Instead of downloading them image is open in another tab,

My backend server is hosted on Aws And Frontend is hosted on firebase

Image is loaded from backend server to client

[thelar]

Hi there, Same issue here - in my case my App is here - http://4x4pb.chapterserver2.co.uk/ - if you click an image of a wheel, lightbox shows but download button does not download the image, simply opens the image in the SAME tab. Download attribute is definitely on the link. My images are on a seperate domain (same server) in a WordPress uploads directory.

Any thoughts?

[thelar]

Apologies... I have now realised that my issue is because the image is on a different domain and that the download attribute only works correctly when on the SAME domain. I'm now using axios to asyncronously get a blob of the image and using that as my large - works fine!

[aautio]

Nice discovery! I did not know that the download only works when on the same domain. This will help to find a solution for the issue.

[canove]

@aautio, thanks for this lib!

Could you maybe implement a "onClickDownload" param, so we can handle this "cors images download" issue?

Right now, my work around looks like this:

const ModalImageCors = ({ imageUrl }) => {
	const [fetching, setFetching] = useState(false);
	const [url, setUrl] = useState("");

	useEffect(() => {
		setFetching(true);
		if (!imageUrl) return;
		const fetchImage = async () => {
			const res = await api.get(imageUrl, { responseType: "blob" });
			const blobUrl = window.URL.createObjectURL(
				new Blob([res.data], { type: res.headers["content-type"] })
			);
			setUrl(blobUrl);
			setFetching(false);
		};
		fetchImage();
	}, [imageUrl]);

	if (fetching) return null;

	return (
		<ModalImage
			smallSrcSet={url}
			medium={url}
			large={url}
			alt="image"
		/>
	);
};

export default ModalImageCors;

It would be nice if I could put this "turn image into blob" logic on a function and call it when users click "Download" on Modal Image.

Thanks anyway!

[rootlinux2]

Hi, @aautio are you still supporting this lib? Did I saw no updates in a year, could be the @canove suggestion implemented?

[aautio]

@rootlinux2 yep still supporting this. I haven't yet studied this issue - I guess the blob-approach could work. I'll need to test it first - perhaps later this week.

[rootlinux2]

@aautio thanks, great news! I just clone the repo to see if I can help with any of these issues.

[simondodson]

how about if u wanted to title and paragraph with an external link >?

[inforeis]

hello, i have the same problem. Has anyone managed to solve it?

[aautio]

Sorry for the long wait! A fix is ready for these cross-origin / external domain issues. I'll publish the next version 2.6.0 in a few days once I've fixed a couple of additional issues.

You can try to click the download-icon on the bottom image at https://aautio.github.io/react-modal-image/ It uses fetch to circumvent same-origin requirements of download attribute. I've tested it on Chrome, Firefox and Safari and it seems to work.