UPD: Как настроить отображение картинок в react?
Вопрос избитый, неоднократно обсуждаем, с кучей решений и тд.. Но!
Проблема. Не отображаются картинки в проекте. Реакт, компонент jsx.
путь компонента: /src/components/post/post.jsx
Пробовал закинуть изображение в: -папку public -в public/images
-в папку src -в src/images -в /src/components/images
Картинка отображается в двух случаях:
если она лежит в папке с компонентом. Рядом.
или если тупо импортировать, и вставлять import mops from './images/mops.jpeg'; src={mops} (но такой вариант не подходит, тк в дальнейшем картинок будет много, и возможно будут динамически меняться)
Не понимаю, в чем проблема, тк в других проектах такого не было. Перепробовал кучу всего, и ничего не помогло.
Заранее спасибо
upd: при инспектировании страницы, увидел ошибку в консоли:
Failed to load resource: the server responded with a status of 404 (Not Found) ------ 1.jpeg:1
Ответы (4 шт):
Скорее всего у вас такой вид проекта:
- src/
- components/
- post/
- post.jsx
- images/
- post/
- components/
Если да, то вам нужно импортировать не из ./images, a ../images
Возможно поможет:
<img src={require('./images/mops.jpeg').default} alt='mops'/>
Кладёшь картинку в public/images/smth.png и пишешь с полным путём от корня сайта: src="/images/smth.png". Сработает при условии, что не планируется размещать сайт в подпапке вместо корня.
Все общедоступные элементы должны находиться в папке public, т.е., фотографии, шрифты, стили и т.д. Папка public доступна из корня домена. localhost:3000/images это пусть к папке public/images. Соответственно, что бы вывести изображение 1.png из папки public, нужно указать пусть к ней как localhost:3000/1.png. Если изображение 1.png находится ещё в какой-то папке, допустим, в images, путь будет localhost:3000/images/1.png