从 API 结果下载图像答案

【问题标题】：Download Image from API Results从 API 结果下载图像
【发布时间】：2016-10-27 02:00:22
【问题描述】：

我正在创建一个应用程序，它使用在线 API 根据搜索的关键字呈现图像。我运行一个 forEach 循环以在 div 中的页面中呈现 12 个图像。如果我不知道搜索结果会提前是什么，因为不同的用户会输入不同的关键词，如果我点击一个按钮，有没有办法下载图片？我正在使用 node.js express 和 javascript

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <h1>GIF</h1>
  <a href="/home">HOME</a>
  <form action="/home/gif" method="POST">
    <input type="text" name="gif" placeholder="Search Gif By Keyword">
    <input type="submit" value="Go">
  </form>
  <div class="gif">
    <h2>Seached Results</h2>
    <% gif.forEach((value) => { %>
      <img src="<%= value.images.original.url %>">
    <%})%>
  </div>
</body>
</html>

【问题讨论】：

在您的上下文中“下载它们”是什么意思。下载到哪里？

标签： javascript html node.js express download

【解决方案1】：

您似乎正在使用模板库，但您没有提及是哪一个。在不了解更多信息的情况下，您可以尝试使用带有download 属性的锚链接。例如：

<div class="gif">
  <h2>Seached Results</h2>
  <% gif.forEach((value) => { %>
    <img src="<%= value.images.original.url %>">
    <a href="<%= value.images.original.url %>" download>Download</a>
  <%})%>
</div>

这样，当用户单击链接时，浏览器将下载 href 中的任何内容。（在这种情况下应该是图像。）

请注意，download 是一个 HTML5 属性。你可以在这里检查它的浏览器兼容性：http://caniuse.com/#search=download。

【讨论】：