用javascript在html中显示jpg

Question

我正在创建一个html+javascript文件。我希望它在文件夹中显示图像。我有这个。

<div id="fotos"></div>
<script>
let n = 5;
let gallery = document.getElementById('fotos') ;
for (let i = 1; i<= n; i++){
gallery.innerHTML += '<img class="tfoto" src="folder/'+ i +'.jpg"><br>';
}
</script>

我的问题是：

我如何让它读取文件夹中的所有图片，而不需要通过数字更改文件名？

Answer 1

我认为您应该使用Image()，如下所示：

<script>
let n = 5;
let gallery = document.getElementById('fotos') ;
for (let i = 1; i<= n; i++){
const img = new Image();
img.src = "folder/"+ i +".jpg";
gallery.appendChild(img);
}
</script>

Answer 2

Javascript对服务器上发生的事情一无所知，服务器也不知道Javascript中发生了什么。若要自动读取服务器文件夹中的所有文件，必须使用某些服务器语言生成文件名。您也可以手动执行相同操作。至于更改名称，你不必这么做。你可以使用与下面类似的代码。

var arr=['a.jpg','b.png','c.jpg'];
var s='';
function add(el) { 
s+="<img class='tfoto' src='folder/"+el+"'><br>";
}
arr.forEach(add);
var gallery = document.getElementById('fotos');
gallery.innerHTML=s;
// for test:
console.log(s);

<div id='fotos'></div>