Question

我正在测试一个Electron应用程序。我希望它从this网站抓取图像。该网站有一个JSON文件，其中包含this代码。

如何获取这些图像并将它们放入img标签？

到目前为止，我有这段代码：

var request = require('request');

request("http://www.pgbovine.net/photos/json-files/boston.json" ,     function(error, response, body) {
body = JSON.parse(body);
console.log(body);

function addImg(arr) {
   myImg = arr[0]["filename"];
   var theImg = document.getElementById("image");

   theImg.innerHTML = myImg;
}

这个HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pics</title>
  </head>
  <body>

    <img id="image">

    <script type="text/javascript">
      require("./memes.js")
    </script>
  </body>
</html>

问题是，代码没有做任何事情！那么如何从上面的JSON文件中获取图像并将其放入和img标记？（使用NodeJS或vanilla JavaScript）

Answer 1

您只需在img标记中添加文件名，但您需要添加整个图片网址，而不仅仅是文件名（如IMG_2914.JPG）。

我尝试了http://www.pgbovine.net/photos/IMG_2914.JPG，但却遇到了404错误。

Answer 2

您应该修改img html标记的'src'属性，使其指向相关图片的网址或相对路径。

您可以在theImg变量上调用'setAttribute'方法来执行此操作。

根据JSON响应的结构，您可能还想将'alt'属性设置为每个图像对象的'description'字符串，这将提供一个简单的鼠标悬停文本。

请注意，您在此处讨论的JSON实际上并不包含图像，只是一个字符串，即图像的文件名。

根据您似乎试图抓取的网站，从波士顿图片库中抓取内容，您需要将文件名附加到以下字符串： http://www.pgbovine.net/new-galleries/boston/images/

像这样：

<img src="http://www.pgbovine.net/new-galleries/boston/images/IMG_2914.JPG">

使用NodeJS从JSON文件中获取图像

2 个答案: