Question

我正在像这样从照片文件夹手动加载图片：

<div class="container">

 <div class="item">
    <a href="#">
        <img type=file src="photos/01.jpg" />
    </a>
 </div>

 <div class="item">
    <a href="#">
        <img type=file src="photos/04.jpg" />
    </a>
 </div>

如何按字母顺序自动从此文件夹中加载所有图片（jpg和png）？

图片名称随机，有时为jpg或png。

这个想法是能够从文件夹中加载所有图片，而无需指定文件夹中的图片数量。例如，如果有2张图片，它将加载2张图片。文件夹中有3张图片，它可以加载3张图片...

要显示的图片名称示例： rrededd01.jpg，treddeeda.png，zsa99889.jpg

谢谢您的帮助。

Answer 1

假设您不使用服务器端语言，则通常的方法是使用Javascript来动态附加图像。您可以尝试使用此代码，替换您提供的部分；它将生成4张图像。如果您有更多图片，则只需更改数字4。

<div class="container"></div>

<script>

// Change this if you have more or less than 4 images!
const quantityOfImages = 4;

// Declares an empty string which will save all the images HTML
let images = '';

// Loops to generate the HTML for each image
for(let i = 1; i <= quantityOfImages; i++) {
  // Assigns number; this is to get the number correctly formatted from 01 to 99
  const number = ('0'+i).substr(-2);

  images += `
    <div class="item">
        <a href="#">
            <img type=file src="photos/${number}.jpg" />
        </a>
    </div>
  `;
}

// Now .container has all the images!
document.querySelector('.container').innerHTML = images;

</script>

Answer 2

假设HTML是由一种服务器端语言（PHP，Python，Ruby，C＃，Java ...）生成的，通常的方法是遍历包含图像的目录，遍历fs条目并生成IMG每个标签。

从文件夹中按字母顺序自动加载所有图片（jpg和png）

2 个答案: