импортировать изображения в ReactJS программно?

Question

Я создаю галерею изображений. Галерея содержит изображения, которые пользователи сохранили от предыдущих посещений сайта. Я храню эти изображения в ведре s3. Когда вызывается API, я загружаю эти изображения локально, а затем пытаюсь отобразить эти изображения в своем интерфейсе. Изображения названы в честь продукта, с которым они связаны, поэтому, когда они загружаются, я знаю, что происходит с каждой картинкой. В React я знаю, что вам нужно импортировать изображение, прежде чем использовать его, но есть ли способ сделать это, не зная заранее, как называется изображение, и сколько будет изображений? Есть ли способ сделать это программно? Если нет, то какие инструменты мне следует использовать?

Спасибо за ваши ответы

Answer 1

Если при вызове API он возвращает URL, который они размещают на вашем s3, вы можете использовать их с простым атрибутом sr c тега img. Допустим, вы получаете от вашего API ответ, подобный следующему:

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

Вы можете хранить данные, которые вы получили от API в состоянии:

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

Тогда вы можете карту бросить это массив в рендере:

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