Javascript 显示单击时已下载但未从浏览器打开的图像

图像显示我点击下载图像后下载的图像显示失败浏览器中没有文件。我在提供下载路径时出错。这是我的密码：

       <button id="download-button" class="btn--success">Download</button>
<script>
    document.getElementById('download-button').addEventListener('click', function () {
        var link = document.createElement('a');
        link.setAttribute('href', '/Downloads');
        link.setAttribute('download', 'https://tinyjpg.com/images/social/website.jpg');
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });
</script>

下载
document.getElementById（'download-button'）。addEventListener（'click'，function（）{
var link=document.createElement（'a'）；
link.setAttribute（'href'，'/Downloads'）；
link.setAttribute（'download'，'https://tinyjpg.com/images/social/website.jpg');
link.style.display='none'；
document.body.appendChild（链接）；
link.click（）；
document.body.removeChild（link）；
});

此最后的

标记应如下所示：

  <a href="https://tinyjpg.com/images/social/website.jpg" download>
       <img src="https://tinyjpg.com/images/social/website.jpg">
  </a>

试试这个

document.getElementById('download-button').addEventListener('click', function () {
    var link = document.createElement('a');
    link.setAttribute('href', 'https://tinyjpg.com/images/social/website.jpg');
    link.style.display = 'none';
    link.setAttribute('download', '');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

产生的
a
标记如下

尝试创建可下载链接以实现动态下载功能。如需更多参考，请参阅

更新

首先，需要将请求的图像转换为base64格式
为了实现这一点，我们需要下载请求的图像
要下载映像，请同时实现Fetch和Promise
下载图像后，将其转换为blob
res.blob（）
最后，您可以使用代码动态创建链接，而代码更改很少
下面是完整的代码片段

async function getBase64ImageFromUrl(imageUrl) {
    var res = await fetch(imageUrl);
    var blob = await res.blob();

    return new Promise((resolve, reject) => {
      var reader  = new FileReader();
      reader.addEventListener("load", function () {
              resolve(reader.result);
          }, false);

      reader.onerror = () => {
         return reject(this);
      };
      reader.readAsDataURL(blob);
   })
}


getBase64ImageFromUrl('https://cors-anywhere.herokuapp.com/'+'https://tinyjpg.com/images/social/website.jpg')
.then(function(result) {

    var link = document.createElement('a')
    link.href = result
    link.style.display = 'none';
    link.setAttribute('download','');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link)}
)
.catch(err => console.error(err));


注意-为了避免CORS问题，我附上了
'https://cors-anywhere.herokuapp.com/“
URL位于图像URL的开头。
html下载属性将起作用，仅当图像和html文件都在同一服务器中时才起作用。这意味着根据您的图像路径，您的html文件必须在服务器中

您可以通过以下方式更新脚本

    document.getElementById('download-button').addEventListener('click', function () {
        var link = document.createElement('a');
        link.setAttribute('href', 'https://tinyjpg.com/images/social/website.jpg');
        link.setAttribute('download',"download");
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });

其已下载，但无法在照片查看器中访问。当我从浏览器打开下载时。我在最近的下载blob中获得此链接：
    document.getElementById('download-button').addEventListener('click', function () {
        var link = document.createElement('a');
        link.setAttribute('href', 'https://tinyjpg.com/images/social/website.jpg');
        link.setAttribute('download',"download");
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });