Отображение изображений в React с использованием JSX без импорта
Проблема, с которой я столкнулся, связана с тегом <img>. Когда речь идет об одиночном изображении, следующий код загружает изображение:
import image1 from './images/image1.jpg';
<img src={image1} />
Однако следующий код не загружает изображение:
<img src={'./images/image1.jpg'} />
или
<img src='./images/image1.jpg' />
Мне нужно обработать массив JSON, что-то вроде:
[{'img':'./images/image1.jpg','name':'AAA'}, {'img':'./images/image2.jpg','name':'BBB'}]
Кроме того, нужно отобразить каждое изображение с названием внизу. Цикл работает нормально, но изображения не загружаются. Фактически, у меня нет возможности импортировать каждое изображение отдельно. На данный момент я использую только JSX. Пожалуйста, подскажите, что я делаю неправильно.
2 ответ(ов)
Дело в том, что вы разместили свою папку с изображениями внутри папки src. Поэтому вам нужно импортировать или использовать require для работы с изображениями. Если же изображения находятся в папке public, вы можете использовать их напрямую без импорта или require, как показано ниже:
<img src='/images/image1.jpg' />
Если вы используете vite+react, поместите свои статические ресурсы в папку Public, а не в src.
Например, изображение "/images/image1.jpg", находящееся в папке public, должно правильно отображаться с помощью тега <img src={'/images/image1.jpg'}/>.
Цикл внутри JSX в React
Обнаружена ошибка: Невозможное нарушение: Неверный тип элемента: ожидался строковый тип (для встроенных компонентов) или класс/функция, но получен объект
Как реализовать дебаунс?
Добавление тега script в React/JSX
React + Redux — Замедление работы onChange в Input при вводе, когда значение берется из состояния