模态中的链接以下载或转到图像的大版本

Question

当前正在尝试制作与Google照片设置相似的照片库。我遇到了问题，因为我的图片非常大-15mb〜，并且连接速度较慢的人无法获得良好的用户体验。

我有一个占位符图像一直显示到加载全尺寸图像为止，但是如果您右键单击并查看全尺寸图像，它将链接到小图像文件，我会遇到问题。

但是主要是我只想在我的模态中创建一个链接以将其带到全尺寸图像。

https://jsfiddle.net/mikemaer/ghc9o1v6/10/

`function onClick(element) {
        document.getElementById("img01").src = element.src;
        document.getElementById("modal01").style.display = "block";
    }

    (() => {
        'use strict';
        // Page is loaded
        const objects = document.getElementsByClassName('asyncImage');
        Array.from(objects).map((item) => {
            // Start loading image
            const img = new Image();
            img.src = item.dataset.src;
            // Once image is loaded replace the src of the HTML element
            img.onload = () => {
                item.classList.remove('asyncImage');
                return item.nodeName === 'IMG' ?
                    item.src = item.dataset.src :
                    item.style.thumbnail = `url(${item.dataset.src})`;
            };
        });
    })();`

作为示例，我只使用了随机图像而不使用占位符图像。

我发现的唯一与此相关的帖子是--- Modal image with download link，而且看起来半正确的唯一真实答案是您需要实现PHP。

如果有人提出任何建议，我将不胜感激。

Answer 1

我认为这是实现此目的的唯一方法，如果您获得更好的解决方案，则可以使用它。请在这里检查。

<img src="https://edmullen.net/test/rc.jpg" data-src="img/canon (1).JPG" onclick="onClick(this)" class="mm-hover-opacity asyncImage" oncontextmenu="window.open('https://edmullen.net/test/rc.jpg', '_blank')">

在这里您可以替换oncontextmenu="window.open('https://edmullen.net/test/rc.jpg', '_blank')高质量图像文件URL

我的意思是oncontextmenu="window.open('img/canon (1).JPG', '_blank')