Задать вопрос
@dmitriu256

Как вставить изображение через стили компонента Error: Can't resolve ...?

Такой вопрос как вставить изображение не через JSX а через свойство background через sass стили компонента.
Решил перенести существующий сайт на реакт (для тренировки и усвоения основ библиотеки - разделение сайта на компоненты)

Изображения и остальные статические файлы хранятся в папке public
Доступ к изображению через JSX следующий - все отображается как нужно
<img src="/img/header/header-btn-icon.png" alt="phone-icon-btn"/>


Логотип задан через стили вот таким образом
.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


Пробовал напрямую задавать родительскую директорию, а также выход из текущего компонента по дереву вверх - постоянно получаю ошибку
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'


Код компонента Header который встраивается в компонент App
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:+380981234567" className="header-contacts__phone">38 (098)123-45-67</a>
                                    <a href="tel:+380971234567" className="header-contacts__phone">38 (097)123-45-67</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>
        );
    }
}


5fa1444287555930919313.png
5fa1444a21e83105781761.png

Буду благодарен за помощь!

Или возможно проблема с зависимости с тем же node-sass пакетом
Делал ранее этот проект - делаю все так же само, однако в старом варианте отображается как нужно без ошибок

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


и сейчас версии пакетов отличаются
5fa1541d5c794571421345.png
  • Вопрос задан
  • 988 просмотров
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
danielchistyakov
@danielchistyakov
Frontend Engineer
Была такая же проблема, загружайте фото в папку src для CSS и прописывайте путь до файла учитывая регистр.
5fb4e4a9c2138230993618.jpeg
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы