Link 在模态内下载或转到图像的大版本

Question

目前正在尝试制作类似于 google 照片设置的照片库。我运行遇到了问题，因为我的图片非常大 - 15mb~ 并且连接速度慢的人不会有良好的用户体验。

我有一个占位符图像，它会在全尺寸图像加载之前显示，但如果您右键单击并查看全尺寸图像，我会运行遇到问题 link 到小图像文件。

但主要是我只想在我的模式中创建一个 link 以将它们带到全尺寸图像。

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})`;
            };
        });
    })();`

我只是使用了一张没有占位符图像的随机图像作为示例。

我发现的唯一相关 post 是这个 --- 唯一看起来半正确的真实响应是您需要实施 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')

Link 在模态内下载或转到图像的大版本

Link within a modal to download or go to a large version of the image

javascript

image

bootstrap-modal

bootstrap-4