自动显示html页面目录中的所有图像

Question

我的服务器上有一个名为“Uploads”的目录。它充满了用户上传的图像。每次有人上传图像时，都会将其添加到目录中。我正在使用 css 属性 display: grid; 让我的图像处于一个漂亮的网格中。这是基本布局：

.imgSet {
            float: left;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .imgSet div {
            float: left;
            width: 30%;
            background-color: #333;
            border: 2px solid lightgrey;
        }
        
        .downloadImg {
            width: 95%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

<div class="imgSet">
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <br>

                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <br>

                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <br>
            </div>

我希望 Uploads 目录中的每个图像都创建一个新的 div、a 和 image 标记以供其使用。src 属性以及 a 标记的 href 属性需要包含 url /Uploads/ imageurl.extension 以及持有相同的类。如果有一种简单的方法可以使用 javascript 执行此操作，它将对我的页面有很大帮助。提前谢谢你。

Answer 1

我直接通过 javascript 添加了 div。我遍历链接数组以创建 div。我并没有真正用 css 做太多事情。每行有3张图片。如果您想要其他内容，只需更改 javascript 中的 css 和数组即可编辑图像链接。

const links = ['https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg'];

for (link of links) {
  document.getElementById('container').innerHTML += `<div>
  <a href=${link}>
  <img src=${link} alt="jeffthecow" width=120 />
  </a>
  </div>`;
}

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<!DOCTYPE html>
<html>

<head>
  <title>test</title>
</head>

<body>
  <div id='container'></div>
</body>

</html>