用HBuilderX将img文件夹所有图片展示在网页，附代码示例！

要在网页中显示img文件夹中的所有图片，您可以使用HTML和JavaScript编写代码。以下是一个示例代码片段，可以实现此功能： ```html <!DOCTYPE html> <html> <head> <title>Display Images from Folder</title> <style> img { width: 200px; height: auto; } </style> </head> <body> <div id="imageContainer"></div> <script> // 获取imageContainer元素 var imageContainer = document.getElementById("imageContainer"); // 定义img文件夹的路径 var imgFolderPath = "img/"; // 定义图片文件的扩展名 var imgExtensions = ["jpg", "jpeg", "png", "gif"]; // 遍历img文件夹中的所有文件 for (var i = 0; i < imgFiles.length; i++) { var imgSrc = imgFolderPath + imgFiles[i]; // 创建img元素并设置src属性 var imgElement = document.createElement("img"); imgElement.src = imgSrc; // 将img元素添加到imageContainer中 imageContainer.appendChild(imgElement); } </script> </body> </html> ``` 此代码假设您的img文件夹位于与HTML文件相同的目录中。您需要根据实际情况调整imgFolderPath变量的值。所有具有图像扩展名的文件将被添加到网页中的imageContainer div元素中。您可以根据需要修改CSS样式来调整图像的大小和布局。 ######[AI写代码神器 | 865点数解答 | 2024-06-24 04:41:55]

服务商

更多选项

快捷项

自定义