1

I have a folder of images and I would like every image in the folder to be used in my Image gallery.

This is what I have now:

import ImageGallery from "react-image-gallery";

import galleryImg1 from "../images/gallery/gallery1.jpeg";
import galleryImg2 from "../images/gallery/gallery2.jpeg";
import galleryImg3 from "../images/gallery/gallery3.jpeg";



const images = [
  {
    original: galleryImg1,
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
  {
    original: galleryImg2,
    thumbnail: "https://picsum.photos/id/1015/250/150/",
  },
  {
    original: galleryImg3,
    thumbnail: "https://picsum.photos/id/1019/250/150/",
  },
];

class MyGallery extends React.Component {
  render() {
    return <ImageGallery items={images} />;
  }
}

How can I make this more dynamic so that I do not have to edit code when I drop a new image in my gallery folder?

mastercooler6
  • 377
  • 2
  • 16

1 Answers1

0

From what I can understand here, you have n number of images and you want an Image Gallery using react-image-gallery library to create a Carousel. All you have to do is pass the number of images and it should automatically increase the number of images in Carousel, what you do here is instead of adding values in array one by one and importing n number of images you can create a function that does that for you but you must have the name of images in that order and adhering to the name convention that have used here so keeping that in mind, this code can help

import ImageGallery from "react-image-gallery";

class MyGallery extends React.Component {
    render() {
        const getImages = (/** @type {number} */ n) => {
            const images = [];
            for (let i = 1; i <= n; i++) {
                images.push({
                    original: `../images/gallery/gallery${n}.jpeg`,
                    thumbnail: `https://picsum.photos/id/${1000 + n}/250/150/`,
                });
            }
            return images;
        };
        return <ImageGallery items={getImages(5)} />;
    }
}
jainChetan81
  • 139
  • 10
  • 1
    I don't think you should be asking for upvotes https://meta.stackexchange.com/questions/63439/begging-for-votes – Asplund Apr 16 '22 at 16:20