Question

我正在创建一个应用程序，该应用程序使用在线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>

Answer 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。

从API结果下载图像

1 个答案: