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

标签 javascript arrays 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>

最佳答案

你需要操作 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

关于javascript - 如何公开 json 数据中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57246012/

相关文章:

javascript - 有没有办法在没有任何事件的情况下运行 jquery.live 函数

c# - 如何在c#中访问数据json.net数组

python - python 中的 Json 编码 dict 和 golang 中的映射不匹配

javascript:包装函数的圈复杂度

javascript - 对象不支持此属性或方法 - 仅 IE8?

javascript - Wicket TextField - 添加 Javascript

arrays - TEXTJOIN 数组公式(有时)在计算中省略最后一个引用数组

C++ 从 char* argv[] 读取输入

java - 如何使用 fill() 方法填充 Java 中特定对象的多维数组?

java - 我们如何获得该谷歌地图 v2 中所有路线节点的音轨