Как обратиться к статическому изображению в папке public из css файла компонента React?

Question

[dmitriu256]

Есть компонент Header

import React from "react";
import './Header.css';



export default class Header extends React.Component{

    render() {
        return (
            <header className="header" id="header">
                <div className="container">
                    <div className="row align-items-center">

                        <div className="col-2 offset-1 col-sm-2 offset-sm-1  col-md-4 offset-md-0 ">
                            <div className="header-logo"></div>
                        </div>

                        <div className="col-9 col-sm-9 col-md-8">
                            <div className="header-contacts">
                                <div className="header-contacts__phones">
                                    <a href="tel:[phone]" className="header-contacts__phone">38 [phone]</a>
                                    <a href="tel:[phone]" className="header-contacts__phone">38 [phone]</a>
                                </div>

                                <a className="button header-contacts__button button__cta" href="#popup">
                                    <img src="/img/header/header-btn-icon.png" alt="phone-icon-btn"/>
                                    <span className="hidden-mobile hidden-sm">Заказать звонок</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        );
    }
}

В JSX в теге img обращаемся к изображению, которое храниться в папке public - все отлично изображение видно.
Если обращаемся к изображению из css файла, который подключен к компоненту Header

.header-logo{
    width: 191px;
    height: 61px;
    background: url('/img/header/header-logo.png') 0 center; // ошибка !!!
    background-size: cover;
}

Получаю ошибку

./src/components/Header/Header.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/components/Header/Header.css)
Error: Can't resolve '/img/header/header-logo.png' in

1) Вопрос почему я не могу достучаться к изображению которое лежит в папке public из css?
Изображение необходимо подключить именно через css - использую для фона секции и не только

2) Если изображение лежит в папке компонента Header - все отлично - логотип отображается

3) Как лучше хранить картинки в общем?
- все изображения в папке (public/img/header)
- в конкретном компоненте, к которому относятся изображения? (Header/img)

Вариант в котором отдельно импортируем картинку в Header.js и подключаем в нем же через инлайн-стили не подходит, хочется именно чтобы было прописано в отдельном файле стилей.
Буду благодарен за ответы!
Логотип задан в css

Answer 1

[Сергей Сунцев]

У вас путь не правишьный к каринке в стилях.
Возможно настройки вебпака не настроены, либо env.

Можно абсолютный путь к изображению прописать, через ../../ и т.д.
Либо создайте .env файл, в котором укажите родительский путь. "NODE_PATH=src/"

Comments

[dmitriu256]

Проверил пути, задавал и абсолютный путь - все равно файл не найден.
Структура проекта

[dmitriu256]

Если указывать полностью абсолютный путь - получаю следующую ошибку

Module not found: You attempted to import ../../../public/img/header/header-logo.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

[Сергей Сунцев]

dmitriu256, а зачем вы выносите изображения из проекта, держите их в папке src/shared/img к примеру

[dmitriu256]

Сергей Сунцев , перенес все изображения в src/shared/img
Логотип, заданный через background - отобразился

.header-logo{
    width: 191px;
    height: 61px;
    background: url('../../shared/img/header/header-logo.png') 0 center;
    background-size: cover;
}

Изображения которые были заданы через JSX

import BtnIcon from '../../shared/img/header/header-btn-icon.png'; - работает только с предварительным импортом
  <a className="button header-contacts__button button__cta" href="#popup">
                                    <img src= {BtnIcon} alt="phone-icon-btn"/> - ОТОБРАЖАЕТСЯ
                                    {/*Не отображается*/}}
                                    <img src= '../../shared/img/header/header-btn-icon.png' alt="phone-icon-btn"/>
                                    <span className="hidden-mobile hidden-sm">Заказать звонок</span>
                                </a>

После разделения сайта на компоненты хочу динамически выводить блоки с изображениями из state, однако в случае когда изображение задаем через import - в таком случае необходимо будет каждое импортировать отдельно?

Пример state

blocks: [
              {
                  img: '../../shared/img/features/block1.png',
                  alt: 'Производство',
                  title: 'Производство',
                  descr: '4 технологические линии способны выполнить любой заказ любой сложности'
              },
              {
                  img: '../../shared/img/features/block2.png',
                  alt: 'Бесплатные образцы',
                  title: 'Бесплатные образцы',
                  descr: 'Бесплатно делаем образцы гофроупаковки - это помогает заранее увидеть упаковку'
              },
              {
                  img: '../../shared/img/features/block3.png',
                  alt: 'Стабильное качество',
                  title: 'Стабильное качество',
                  descr: 'Собственная лаборатория контролирует качество на каждом этапе производства'
              }
];

Или поступить другим способом - просто менять путь к изображению в дочернем компоненте в импорте, в цикле конечно?
Пример первой итерации
import MyImage from {props.blocks[0].img};

Что то я с этими изображениями совсем запутался

Answer 2

[Бектур Муратов]

Так как вы используете webpack необходимо импортировать картинку как модуль, а потом уже использовать

import React from 'react'
import Logo from 'путь_к_картинке'

...... 
<img src={Logo} />