不使用<img/>标记显示多个图像？

Question

有没有办法可以在HTML页面上显示500多个图像，而不必写出500多个img src标签？

在来到这里之前我已经用Google搜索了这个，但我似乎发现的唯一结果建议使用PHP，或称为“glob”的东西，我宁愿尝试不使用。

是否可以在文件中使用单独的.js文件，然后使用HTML中的脚本显示图像？

.jpg和.png文件

Answer 1

您可以将图像名称存储在JavaScript数组中，然后使用forEach列出所有图像：

＆＃13;

＆＃13;

var images = [
  'airplane.png',
  'arctichare.png',
  'baboon.png',
  'barbara.png',
];

var baseUrl = 'https://homepages.cae.wisc.edu/~ece533/images/';

container = document.getElementById("imagesContainer");
function createImages(item, index) {
  container.innerHTML = container.innerHTML + "<img src=\"" + baseUrl + item + "\"/><br/>";
}
images.forEach(createImages);

＆＃13;

<div id="imagesContainer"></div>

＆＃13;

＆＃13;

＆＃13;

如果要自动列出它们，您需要像PHP这样的服务器脚本语言。

Answer 2

这样做的一种方法（如果它们都在一个文件夹中就很好）只是循环遍历文件夹。如果要将它们显示在单独的div中，则可能需要修改以下代码。

出于演示原因，我将数字设置为75，你可以将其设置为500.或者如果有些是jpg而有些是你指示的png，你可以为每个（jpg和png）设置一个子文件夹并设置var为jpg到例如300和png到200等..

希望这有帮助。

var jpgcontainer = document.getElementById('jpg');
var pngcontainer = document.getElementById('png');
var files = {
  'jpg': 300
};

var files2 = {
  'png': 200
};

for (var jpgext in files) {
  for (var i = 0; i < files[jpgext]; i++) {
    var jpgsrc = "images/jpg/" + (i + 1) + "." + jpgext;
    var jpgimg = new Image();
    jpgimg.src = jpgsrc;
    jpgcontainer.appendChild(jpgimg);
  }
}

for (var pngext in files2) {
  for (var j = 0; j < files2[pngext]; j++) {
    var pngsrc = "images/png/" + (j + 1) + "." + pngext;
    var pngimg = new Image();
    pngimg.src = pngsrc;
    pngcontainer.appendChild(pngimg);
  }
}

img {
  width: 50px;
  height: 50px;
  display: block;
}

<div id="imgcontainer">
<section id="jpg">
  
</section>
<section id="png">
  
</section>
</div>

Answer 3

一种方法是使用Excel和CONCAT为您动态创建代码。

因此，如果您的列A包含所有图像位置，您可以在B列中编写类似的内容。因此，假设您的A列具有“image1.png”：

=CONCAT("<img src='", A1, "' />")

然后你只需将它完全应用到你的B列并复制HTML。