Question

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

{
    "to":"FCM TOCKEN",

    "data":
    {
        "message":"MSG",
        "message_title": "custom"
    },
    "notification": {
       "body": "MSG",
       "message_title": "Placing order",
       "content_available": true,
       "priority": "high"
   }

}

我的HTML包括：

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

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

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

所以我想要实现的是在类“ 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"/>

进一步阅读

Answer 2

首先获取包装器div。然后遍历所有ur图像并动态创建div并将其注入ur html

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

var wraper = document.getElementById('wrapper');  // ur wrapper div
var elm;
data.tiles.map((item, index) => {                    // looping through all item 
  elm += `<div class="tile-image${index+1}">    
     <img src="${item.img}" />   
  </div>`
})
wraper.innerHTML = elm // inject all the html inside ur wrapper

希望有帮助

Answer 3

您需要附加图片标记，因为div没有显示图片的属性。您可以执行以下操作以使图像在html中工作。

data = {
  "tiles" : [
  {
    "img" : "https://picsum.photos/200/300"
  },
  {
    "img" : "https://picsum.photos/200/300"
  },
  {
    "img" : "https://picsum.photos/200/300"
  }
 ]
};

data.tiles.forEach((item, index) => {
  let img = new Image();
  img.src = item.img;
  tile = document.getElementsByClassName('tile-image' + (index + 1))[0];
  tile.appendChild(img);
});

如何使用JavaScript将图像从JSON文件添加到HTML

3 个答案: