CODEWITHSUNDEEP
javascripthtmlimagedirectoryload
Jaris GV
Jaris GV

Reputation: 1

How can I add images from a directory via Javascript to an HTML element without specifying sequential names

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 I need to load all the images without specifying the names, 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.

Upvotes: 0

Views: 721

Answers (1)

j0ste
j0ste

Reputation: 385

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.

Upvotes: 1

Related Questions