Load all images from a directory?

[jonbell-lot23]

Hello, and thanks for this project!

Rather than hard-coding all the images I want to use, I'd like the component to read from a directory and automatically populate all the images. I'm new to React so I'm not sure how to go about this.

Is this something that's currently possible with react-photo-album? If not, do you have a quick code snippet that would explain how to do it? Thanks!

[igordanchenko]

Hi there!

Unfortunately, this is not something that react-photo-album would handle for you. Not even is this question outside the scope of this library, but it's even out of the scope of React. StackOverflow or similar developer forums may be more appropriate to address this topic. The answer to this question greatly depends on the framework/bundler you are using and may range from "yep, you can use workaround ABC" to "nope, this is not possible in XYZ."

Generally speaking, there are two distinct approaches to what you'd like to achieve:

1. static linking at build time (I'll expand on this option below)

2. dynamic data retrieval at runtime (for instance, if you are hosting your images in external storage like S3, your application can call either your backend API or S3 API and retrieve a list of images to display)

In the case of build time linking, the list of images has to be hard-coded one way or another, and your bundler would typically handle this for you.

1. You can hard-code all the images by hand (that's what you are trying to avoid)

import img1 from "../public/img1.jpg";
import img2 from "../public/img1.jpg";
....

const images = [img1, img2, ... ];

2. If that's too much to code, or your files change from time to time, you can consider automating this process by writing a shell script that reads a directory contents and writes a js file in the format mentioned above into your src folder. Then you'd just run your build process as usual.

3. If your files are of identical dimensions and happen to have predictable names that you can re-create at runtime, you can just generate file names directly in your code:

const images = Array.from({ length: 100 })
    .map((_, index) => ({ src: `/public/image${index}.jpg`, width: 800, height: 600}));

4. You can look into custom loaders available in your framework/bundler. For example, if you use Webpack or a Webpack-based framework like Next.js, you can probably get away with Webpack's require.context and load your images at build time like this. But please note this approach is not guaranteed to work in all frameworks. For instance, it doesn't work in Create React App by default, if I'm not mistaken.

Hope this helps.

[jonbell-lot23]

What an amazingly thorough answer! I really appreciate it :)

[igordanchenko]

I'll go ahead and mark this thread as resolved. Cheers!