importing images into ReactJS programmatically?

Question

I am creating a gallery of images. The gallery contains images that users have saved from previous visits to the site. I am storing those images in an s3 bucket. When an API is called, I download those images locally, and am then trying to display those images in my frontend. The images are named after the product they are associated with, so that when they are downloaded, I know what is going on with each picture. I know with React that you have to import an image before you use it, but is there a way to do this without knowing beforehand what the image is called, and how many images there are going to be? Is there a way to do this programmatically? If not, what tools should I use?

Thanks for your replies

Carlos Saiz Orteu · Accepted Answer · 2020-04-12 13:52:33Z

2

If when you call the API it returns the url they are hosted on your s3 you can use them with a simple src attribute of the img tag. Let say you get from your api a response like this:

[
    {
        url: 'some url',
        name: 'some name
    },
    {
        url: 'some url',
        name: 'some name
    },
]

you could store the data you got from the api in a state:

apicall()
    .then((response) => this.setState({ images: response );

Then you could map throw this array in the render:

render() {
    return (
        <div>
            {
                images.map((image) => <img src={image.url} />)
            }
        </div>
    )
}

answered Apr 12, 2020 at 13:52

Carlos Saiz Orteu

1,8151 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt B. Over a year ago

I'm doing that in my code currently, but I need to import the images within my component in order to display them. Do you know how to get around this requirement?

Carlos Saiz Orteu Over a year ago

Just provide some code and I'll be happy to check it in order to help you

Collectives™ on Stack Overflow

importing images into ReactJS programmatically?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related