我对JavaScript不太熟悉。所以，如果有一个简单的方法，请帮助我。我正在制作一个局域网网页，它将显示存储在文件夹中的所有图片。但是使用div和img标签一个接一个地添加成千上万的图像是非常困难的。所以我想如果有一种方法可以自动将文件夹中的图像添加到我的html中。我认为使用相同的图像名称和不同的索引号(我会重命名图像，比如img(1(，img(2((的for循环对此很有用，但我不知道如何做到这一点？
这是我的html代码(使用Materialize框架(-
<body>
<div class="fixed-navbar"> <--I have to write this every time I want to add image. So this is where I am wanting some automation-->
<nav>
<div class="nav-wrapper white">
<a href="#" class="brand-logo black-text">LAN Page</a>
<ul class="right hide-on-med-and-down">
<li><a href="videos.html" class="black-text">Videos</a></li>
<li class="active blue lighten-3"><a href="#" class=" black-text">Home</a></li>
</ul>
</div>
</nav>
</div>
您可以使用JavaScript将HTML动态添加到HTML页面中。让我来教你怎么做。
import * as img from 'images/path_to_img.ext';
for (var i=0;i<img.length;i++)
{
document.querySelector("image-container").innerHTML+=('<img src='+img[i].src);
}<div class="image-container">
</div>希望能有所帮助！
服务器端可能不需要让JS知道有多少图片文件。
let max = 10; // Replace with Number of Images
let body = document.body;
for (let x = 0; x < max; x++) {
body.innerHTML += ` // Template Literals. MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
<div class="fixed-navbar">
<nav>
<div class="nav-wrapper white">
<a href="#" class="brand-logo black-text">LAN Page</a>
<ul class="right hide-on-med-and-down">
<li><a href="videos.html" class="black-text">Videos</a></li>
<li class="active blue lighten-3"><a href="#" class=" black-text">Home</a></li>
</ul>
</div>
</nav>
</div>
`
}
我觉得很奇怪，你只想添加"局域网页面"，而不是图像本身。如果你需要图片。评论它。