Ранее уже обращался с подобным вопросом, но универсального ответа не нашел.
Сайт статический - созданный для тренировки с основами React.
Суть вопроса
Есть главный компонент Features в нем state с массивом данных blocks для дочернего компонента
Как правильно передавать путь к изображению в дочерний компонент, правильный ли мой подход к решению задачи?
Рабочий метод для меня
Проект собран через create-react-app
1) Чтобы не нарушать концепцию реакта все изображения сохраняю в папке src/shared/img а не в папке public
2) В дочернем компоненте создал "файл-библиотеку" которая хранит в себе все пути к нужным мне изображениям
import img1 from '../../../shared/img/features/block1.png';
import img2 from '../../../shared/img/features/block2.png';
import img3 from '../../../shared/img/features/block3.png';
import img4 from '../../../shared/img/features/block4.png';
import img5 from '../../../shared/img/features/block5.png';
import img6 from '../../../shared/img/features/block6.png';
export {img1, img2, img3, img4, img5, img6};
3) В FeaturesItem подключаю свою библиотеку изображений
import * as Img from './images';
Путь к изображению в теге img прописываю в виде массива,
<img src={Img[`${props.img}`]} alt={props.alt}/>
Результат манипуляций
State главного компонента Features
import FeaturesItem from "./FeaturesItem/FeaturesItem";
export default class Features extends React.Component{
constructor(props) {
super(props);
this.state = {
blocks: [
{
img: 'img1',
alt: 'Производство',
title: 'Производство',
descr: '4 технологические линии способны выполнить любой заказ любой сложности'
},
{
img: 'img2',
alt: 'Бесплатные образцы',
title: 'Бесплатные образцы',
descr: ' Бесплатно делаем образцы гофроупаковки - это помогает заранее увидеть\n' +
' упаковку'
},
...
]};
render(){
<div className="row">
{this.state.blocks.map((block, index) => {
return (
<FeaturesItem
key={index}
img={block.img}
alt={block.alt}
title={block.title}
descr={block.desc}
/>
);
})}
</div>
}
Методы подключения которые пробовал, перед тем как создать библиотеку подключений - результат отрицательный - :
//1
<img src={props.img} alt={props.alt}/>
//2
<img src={require(props.img)} alt={props.alt}/>
Перебрав разные методы подключения изображений в компонент пришел к следующим выводам:
1) Данный подход справедлив только к статическим сайтам - где известно точное количество изображений и все они вручную прописаны в файле-библиотеки
2) В реальных проектах - где количество изображений неизвестно и записывать путь к каждой картинке - не лучшее решение. Для этого в state из componentDidMount - ajax запроса будет передан путь к картинке которая храниться на сервере.
Итог
Статические элементы на сайте подключаем через import.
В динамических сайтах (карточка новостей, товара) используем данные от сервера - избавляемся от ручного прописывания путей к файлам.
<img src={props.img} alt={props.alt}/>
Насколько верен мой подход к решению задачи, а также верны ли рассуждения по теме подключения файлов?
Средний