javascript - 如何使用 JavaScript 将 JSON 文件中的图像添加到 HTML

Question

我有一个包含 3 个图像的 JSON 文件，但是我正在努力寻找有关如何使用 JavaScript 将它们显示在我的网页上的示例。我的 JSON 文件包括:

{
  "tiles" : [
  {
    "img" : "example1.jpg"
  },
  {
    "img" : "example2.jpg"
  },
  {
    "img" : "example3.jpg"
  }
 ]
} 

我的 HTML 包括:

       <div class="tile-image1"></div>
       <div class="tile-image2"></div>
       <div class="tile-image3"></div>

我已经通过以下方式检索了我的 JSON 数据:

var requestURL = "https://api.myjson.com";
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

所以我想要实现的是向“tile-image1”类显示一个“img”，向“tile-image2”类显示第二个“img”，等等。任何帮助都会很棒。

Answer 1

将图像 URL 分配给 CSS，并将图像类的名称添加到 JSON。然后，当您迭代 JSON 时，将类名添加到元素中。

const data = {"tiles" : [{"img" : "tile-image1"},{"img" : "tile-image2"},{"img" : "tile-image3"}]} 

const root = document.querySelector('#root');

// Create the HTML by `map`ping over the tile data and
// returning a string, not forgetting to join it up at the end
const html = data.tiles.map(({ img }) => {
  return `<div class="tile ${img}"></div>`;
}).join('');

root.insertAdjacentHTML('beforeend', html);

.tile { width: 50px; height: 50px }
.tile-image1 { background-image: url('https://dummyimage.com/50x50/000/ffffff.png'); }
.tile-image2 { background-image: url('https://dummyimage.com/50x50/ffff00/fff.png'); }
.tile-image3 { background-image: url('https://dummyimage.com/50x50/00ffff/fff.png'); }

<div id="root"/>

进一步阅读

• map
• insertAdjacentHTML