Реагировать - динамически загружать изображение

Question

У меня есть ответ JSON с загрузкой данных, таких как местоположение изображения.

Тогда, когда я пытаюсь загрузить изображение, React не может его найти.

Ни один из ответов на подобные вопросы не помогает, потому что все они говорят мне импортировать изображение, но мне нужно загрузить его на манжету. Например:

{Object.values(this.state.advertisements).map((advertisement, i) => {
...
<img width='80px' src={require(advertisement.image)} alt='house'/>

Тогда я получаю сообщение об ошибке «не могу найти модуль».

Путь выглядит так:

изображение: ./images/house.JPG,

Answer 1

Как упомянуто в комментарии, require используется для включения двоичных модулей или других файлов JS. В редких случаях он используется для включения фактических данных из изображений и т. Д. При использовании его в первую очередь с веб-пакетом.

В зависимости от ваших возвращаемых данных можно написать <img src={advertisement.image} />, предполагая, что данные четко определены и имеют фактическую ссылку на внешнее изображение.

Answer 2

Я думаю, нам не нужно требовать.

src={`./images/${advertisement.image}`} будет нормально работать для импорта изображения.

Для большей безопасности вы можете добавить переменные среды для хранения URL-адресов сервера и локальных URL-адресов.

В производстве src={`${url}/images/${advertisement.image}`} загрузит изображение с сервера.