在动态显示的图像上设置下载属性答案

【问题标题】：set download attribute on dynamically displayed image在动态显示的图像上设置下载属性
【发布时间】：2013-07-19 12:17:12
【问题描述】：

我正在使用以下代码在页面上显示来自网站的一长串图像。我希望能够使用下载HTML5 属性，以便单击每个图像都会下载它。

这是我尝试过的：

for (var i = 0; i<arlnData.d.length;i++) {
        var img = document.createElement('img');
        img.src = "https://images.website.com/airvendors/airlines_"+arlnData.d[i].Code+".gif"; 
        img.download ="my image"; 

        //also tried: 
        //img.src = "https://images.website.com/airvendors/airlines_"+arlnData.d[i].Code+".gif";
        document.body.appendChild(img);

        var imageCellspace=document.createElement('br');
        document.body.appendChild(imageCellspace);
}

图片显示正常，但点击下载不起作用。

这里的正确语法是什么？

【问题讨论】：

标签： javascript html image download

【解决方案1】：

试试这个：

for (var i = 0; i<arlnData.d.length;i++) {
        var img = document.createElement('img');
        img.src = "https://images.website.com/airvendors/airlines_"+arlnData.d[i].Code+".gif"; 

        var a = document.createElement('a');
        a.href = img.src;
        a.download = 'image.gif';

        a.appendChild(img);

        document.body.appendChild(a);

        var imageCellspace=document.createElement('br');
        document.body.appendChild(imageCellspace);
}

download 属性适用于 a，而不适用于 img。检查documentation。

【讨论】：

啊，需要链接，完美。谢谢！

【解决方案2】：

您必须将<img> 包裹在<a> 上，因为download 属性仅适用于锚点。

var img = document.createElement('img');
img.src = "https://images.website.com/airvendors/airlines_"+arlnData.d[i].Code+".gif"; 

var a = document.createElement('a');
a.href = img.src;
a.download = "My image name";

a.appendChild(img);
document.body.appendChild(a);

See MDN for reference!

【讨论】：