Передача картинок в компонент через пропсы в React.js

Question

Передача картинок в компонент через пропсы в React.js

Рейтинг: 0Ответов: 2Опубликовано: 27.08.2023

Я только-только начинаю изучать React.js и его подходы как таковые, поэтому если кто-то посчитает вопрос глупым и прочее - не судите строго. Я верстаю сайт, где на главной странице у меня отображается перечень услуг - компонент <ServiceList />, состоящий, в свою очередь, из компонентов <ServiceItem />. Вот мой шаблон компонента <ServiceItem />:

const ServiceItem = (props) => {
return (
        <div>

            // Желаемая картинка, которая чхать хотела на пропсы
            <img src={props.service.img}>

            // Описание услуги, которое замечательно подтягивается пропсами
            <span>{props.service.title}</span>

        </div>
    );
}

Сам компонент я в дальнейшем импортирую в ServiceList компонент, где по задумке с помощью массива объектов будет отображаться столько компонентов ServiceItem, сколько мне нужно, используя пропсы, которые мне нужны. Вот так выглядит компонент <ServiceList />:

import React, { useState } from 'react';
import ServicesItem from './ServiceItem';

const ServicesList = () => {
    const [services] = useState ([
        {id: 1, img: '../../../src/img/santech/Смеситель on.png', title: 'Установка смесителя',},
        {id: 2, title: 'Проверка счетчиков',},
        {id: 3, title: 'Магнитный ключ',},
        и так далее.....
    ])

    return ( 
        <div>

            {services.map(service => 
                <ServicesItem
                    service={service}
                    key={service.id}
                />
            )}

        </div>
    );
}

Так вот, с заголовками услуг ( props.service.title ) проблем нет, всё динамически подтягивается как надо, а вот с картинками иллюстрациями ( props.service.img ) я намучался уже. Картинки мои хранятся в файле проекта, в пути ../../../src/img/santech/... и компонент их видеть не видит

Я почитал пару статей и пару похожих вопросов на форумах и понял, что вроде как, то что я хочу сделать вообще не реализуемо. Что если заголовок строкой может передаться через пропсы, то url до картинки то же текстом через пропсы передаться не может. Я пробовал и через инлайновый стиль BackgroundImage, и пробовал пути менять на абсолютные (http://localhost/.....).

Вероятнее всего, я просто делаю "по-джуниорски" и то, что я хочу передать url картинки через хук useState() - делать не стоит. Опытные разработчики, подскажите новичку в реакте, реализуема ли передача урла картинки через данных хук? Задумка такая, что я в одном месте, в том самом массиве объектов, при желании мог бы поменять заголовок любой услуги на другой, и любую картинку услуги на другую. По этому, желательно, не отходить далеко от идеи импортов пропсов через массив объектов.

Заранее спасибо!

reactjs jsx

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

как все это происходит:

когда ты запускаешь скрипт запуска (npm start или yarn start или ...) весь код который ты написал компилируется в js/css и кладется в какую то папку (название папок в основном build или dist или .next) и там же есть index.html на основе которого ты и видишь в браузере результат, так вот после компиляции(этим занимается например webpack) имена файлов меняются(на это есть своя причина), так вот после сборки нету никакого ../../../src/img/santech/Смеситель on.png, нету не таких папок, не такого файла, соответственно это некорректный путь. Все это можно увидеть если запустить скрипт сборки(в основном имя скрипта build) вместо разработки (скрипты в package.json), после запуска появится папка в которой ты и увидишь весь скомпилированный код.

есть два варианта, если это не удаленный ресурс( https://.... )

1:

import someImgSrc from 'путь/img.формат' (`../../some-img.png`)

    const Comp = () => { 
     return <img src={someImgSrc}/> 
    }

2: через сборщик типа webpack, скопировать папку где лежат картинки в конечную папку после сборки (название папок в основном build или dist или .next)

например в create-react-app или в vite все что в папке public копируется в финальную папку сборки, то есть можно что то положить туда и использовать в коде в любом месте так:

<img src='/my-img.png'/>

юзать можно так

Answer 2

▲ 0

Сделай импорты картинок:

import { magnetKey } from '../../src/Магнитный ключ.jpg'

А дальше передавай ее внутрь:

const ServicesList = () => {
    const [services] = useState ([
        {id: 1, src={magnetKey}, title: 'Установка смесителя',},
        {id: 2, title: 'Проверка счетчиков',},
        {id: 3, title: 'Магнитный ключ',},
        и так далее.....
    ])

При такой передаче путей сборщик учтет добавленный хэш к имени файла

Передача картинок в компонент через пропсы в React.js

Ответы