@dmitriu256

Как правильно загружать динамические изображения в дочерний компонент?

Ранее уже обращался с подобным вопросом, но универсального ответа не нашел.
Сайт статический - созданный для тренировки с основами 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}/>
Результат манипуляций
5fae676d08eaa491403037.png

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}/>

Насколько верен мой подход к решению задачи, а также верны ли рассуждения по теме подключения файлов?
  • Вопрос задан
  • 23 просмотра
Решения вопроса 1
@twolegs
Данный подход справедлив только к статическим сайтам - где известно точное количество изображений и все они вручную прописаны в файле-библиотеки

Все верно, при использовании изображений как модулей (а при импорте и сборке через вебпак это именно так, изображения по факту становятся js-модулями).
) В реальных проектах - где количество изображений неизвестно и записывать путь к каждой картинке - не лучшее решение. Для этого в state из componentDidMount - ajax запроса будет передан путь к картинке которая храниться на сервере.

При использовании динамических изображений пути и сами изображения становятся не статикой, а данными. То есть и работать с ними надо как с данными. В общем случае эти пути надо получать с бэкенда вместе с запросом данных.

В итоге да, верно. import - это когда это статические файлы. В случае динамики пути к изображениям переходят в модель данных.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы