How to insert image through component styles Error: Can't resolve ...?

Question

React

Such a question is how to insert an image not through JSX, but through the background property through sass component styles.
I decided to transfer the existing site to react (for training and mastering the basics of the library - dividing the site into components)

Images and other static files are stored in the public folder
Access to the image via JSX is as follows - everything is displayed as needed

<img src="/img/header/header-btn-icon.png" alt="phone-icon-btn"/>

The logo is set through styles like this

.header
  background: #fff
  padding-top: 40px
  &-logo
    width: 191px
    height: 61px
    background: url("/img/header/header-logo.png") center 0 no-repeat -- ошибка!!!!!
    background-size: cover

I tried to directly set the parent directory, as well as exiting the current component up the tree - I constantly get an error

background: url("/public/img/header/header-logo.png")

./src/components/Header/Header.sass (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/components/Header/Header.sass)
Error: Can't resolve '../../img/header/header-logo.png' in 'C:\Verstka2019\Повтор React-October-2020\Сайты на реакт для портфолио\cardboard-full\src\components\Header'

Code of the Header component that is embedded in the App component

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

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>
        );
    }
}

I will be grateful for your help!

Or perhaps there is a dependency problem with the same node-sass package
I did this project earlier - I do everything the same way, but in the old version it displays as it should without errors

background: url("/public/img/header/header-logo.png")

and now the package versions are different

Answer 1

I had the same problem, upload the photo to the src folder for CSS and write the path to the file case sensitive.