如何在不指定顺序名称的情况下通过 Javascript 将目录中的图像添加到 HTML 元素

Question

I need to generate a list with images from a given folder in my HTML via Javascript.

Okay, I did that, but after searching dozens of similar codes, I realized that it can only add images with sequential names (for example, 01.jpg, 02.jpg, 03.jpg ...) and , so that I don't have to rename them.

This is my code:

 for (i = 01; i <= 09; i++) { document.write('<li class="slider"><img src="https://jar.is/cdn/img/0'+i+'.jpg" alt="'+i+'" title="'+i+'" /></li>'); }

 .slider { list-style: none; padding-left: 0; display: flex; flex-flow: row wrap; margin: 3px; align-items: center; justify-content: center; } .slider img { max-width: 450px; width: 270px; height: 210px; object-fit: cover; border-radius: 6px; }

 <ul class="slider"></ul>

Is there a way to load ALL THE IMAGES (*.jpg) in my HTML list?

Thanks a lot.

Answer 1

If it's not a Server side JavaScript, there is no simple way to get the complete folder contents from the client side. You would need to send the file list from your backend or get it by AJAX via some kind of API.

See Get list of filenames in folder with Javascript for more inspiration.