时间戳

首页 > 解决方案 > 如何从 json 数据中公开图像

javascript - 如何从 json 数据中公开图像

问题描述

我已经遍历了一些 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>

标签： javascriptarraysjson

解决方案

您需要操作 DOM，就像这样。

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

参考：

使用 javascript 将 img 元素添加到 div

推荐阅读