How to load all the images from one of my folder into my web page, using Jquery/Javascript

Question

I have a folder named "images" in the same directory as my .js file. I want to load all the images from "images" folder into my html page using Jquery/Javascript.

Since, names of images are not some successive integers, how am I supposed to load these images?

Answer 1

Works both localhost and on live server without issues, and allows you to extend the delimited list of allowed file-extensions:

var folder = "images/";  $.ajax({     url : folder,     success: function (data) {         $(data).find("a").attr("href", function (i, val) {             if( val.match(/\.(jpe?g|png|gif)$/) ) {                  $("body").append( "<img src='"+ folder + val +"'>" );             }          });     } }); 

NOTICE

Apache server has Option Indexes turned on by default - if you use another server like i.e. Express for Node you could use this NPM package for the above to work: https://github.com/expressjs/serve-index

If the files you want to get listed are in /images than inside your server.js you could add something like:

const express = require('express'); const app = express(); const path = require('path');  // Allow assets directory listings const serveIndex = require('serve-index');  app.use('/images', serveIndex(path.join(__dirname, '/images')));