不使用 <img> 标签显示多张图片？ [关闭]答案

【问题标题】：Display multiple images without using <img> tag? [closed]不使用 <img> 标签显示多张图片？ [关闭]
【发布时间】：2017-06-21 20:46:03
【问题描述】：

有什么方法可以在 HTML 页面上显示来自文件夹的 500 多张图像，而无需写出 500 多张 img src 标签？

我在来这里之前已经用谷歌搜索过这个，但我发现的唯一结果似乎建议使用 PHP，或者称为“glob”的东西，我宁愿尽量不要使用。

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

.jpg 和 .png 文件

【问题讨论】：

如果您没有对图像进行硬编码，那么您需要在服务器端读取图像文件夹并将它们呈现到页面上。仅在客户端的 JavaScript 无法做到这一点。
完全有可能，最简单的方法取决于您希望使用的语言以及图像名称的格式。您可以使用从 1 到 500 的基本 PHP 循环，并将 .png 附加到每个循环，例如，显示 1.png、2.png 等。如果它们没有按顺序编号，您可能必须使用包含所有文件名的数组。
为什么不使用 each 循环遍历所有图像并动态生成 src？

标签： javascript jquery html css image

【解决方案1】：

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

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);

&lt;div id="imagesContainer"&gt;&lt;/div&gt;

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

【讨论】：

很抱歉回复太晚了，遗憾的是我无法使用这种方法显示图像:(
刚刚修复了我的示例。您是否在浏览器控制台中收到任何 JavaScript 错误消息？否则，检查生成的图片路径是否正常

【解决方案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>

【讨论】：

jsfiddle.net/RachGal/krcs65L5
很抱歉回复太晚了，遗憾的是我无法使用这种方法显示图像:(
如果你用数字来命名你的图像，1,2,3... 500 等就可以了
您还必须指定正确的文件路径..
每张图片都是名称 1.jpg 2.png 等，并且路径指定正确，所以我不确定。是否也需要使用 Jquery.min.js？

【解决方案3】：

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

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

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

然后您只需将它一直应用到您的 B 列并复制 HTML。

【讨论】：