javascript - 是否可以将js文件中的图像动态加载到html文件中？

Question

我有一个 html 文件，其中包含一些图像。但现在我想将 JavaScript 文件(代码如下所示)中的图像加载到我的 html 文件 div 类中，而不总是将其输入到我的 div 类中。有没有办法用 JavaScript、JSON 或其他什么方法来实现这一点？

var swiperExhibitors = ['141726', '141747', '141786', '144994', '145002', '145070', '145072', '151550', '168999', '233192', '545600'];

var swiperImages = ['1437645467.1063_3_o.jpg', '1432890452.7057_3_o.jpg', '1538377347.3443_114_o.jpg', '1495453007.7039_3_o.jpg', '1433941431.3552_3_o.jpg', '1491818250.7553_3_o.jpg', '1364303014.8606_3_o.jpg', 'fa71eb9a8367a0ec85c7b6c05a05b6ef_01_07_o.jpg', '1474012701.9219_3_o.jpg', '1546596386.5453_145_o.jpg', '1554193616.0853_145_o.jpg'];

我想编写一个脚本来为我完成所有工作并在我的 html 文件中动态创建图像

Answer 1

这样您就可以动态创建图像-reference

var swiperImages = ['1437645467.1063_3_o.jpg', '1432890452.7057_3_o.jpg', '1538377347.3443_114_o.jpg', '1495453007.7039_3_o.jpg', '1433941431.3552_3_o.jpg', '1491818250.7553_3_o.jpg', '1364303014.8606_3_o.jpg', 'fa71eb9a8367a0ec85c7b6c05a05b6ef_01_07_o.jpg', '1474012701.9219_3_o.jpg', '1546596386.5453_145_o.jpg', '1554193616.0853_145_o.jpg'];

function myFunction(src) {
  var x = document.createElement("IMG");
  x.setAttribute("src", src);
  x.setAttribute("width", "304");
  x.setAttribute("height", "228");
  x.setAttribute("alt", "The Pulpit Rock");
  document.body.appendChild(x);
}


swiperImages.forEach(el => {
 myFunction(el)

})