Question

我遍历了一些json并从数据中提取了url。缩略图数据如下：

{href: "https://link/medium.jpg"}
   href: "https://link/medium.jpg"
    >__proto__: Object

如何公开每个网址，以便实际的图像显示在浏览器上而不是链接上。这是我的代码。 console.log(o._links.thumbnail)是我从上面收到的数据：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Fetch Json</title>
  </head>
  <body>
    <p>
      thumbnail: 
    </p>
    <script>
      const url =
        "https://s3-us-west-2.amazonaws.com/example.json";
      async function getThumbnail() {
        const response = await fetch(url);
        const data = await response.json();
        var art = data._embedded.artworks;
        art.forEach(function(o) {
          //console.log(o._links.thumbnail);
          var img = document.createElement("image");
          img.src = o._links.thumbnail; //set the value equal to the href
          document.querySelector("body").appendChild(img);
    });
  }

  getThumbnail();
</script>

Answer 1

您需要操纵DOM，诸如此类。

let elem = document.createElement("img");
elem.src = o._links.href;
document.getElementById("placehere").appendChild(elem);

参考：

Adding an img element to a div with javascript

Answer 2

尝试附加image元素并将src属性设置为href的值这比我之前编写的代码更通用：

1）通过您的json循环 2）创建图像元素

var img = document.createElement("image"); img.src = o._links.thumbnail; //set the value equal to the href document.querySelector("body").appendChild(img);

如何从JSON数据公开图像

2 个答案: