Как в реакте у css background: url(...) указать путь к картинке?

Question

[WoodyAndBuzz]

Как в реакте у css background: url(...) указать путь к картинке?

const Articles = () => {
    return <div className={style.Articles}>
                <div className={style.Article__wrapper}>
                    <div className={classNames(style.container, style.itemOne)}>
                        <h1 className={style.headline}>Get Your Best Cosmetic Products Here</h1>
                        <div className={style.text}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</div>
                        <input className={style.search} type="text" />
                        <input className={style.submit} type="submit" />
                        <button className={style.buttons}></button>
                    </div>
                </div>
                <div className={style.imageJar}><img src={cream} alt="" /></div>
            </div>
}

.submit{
    width: 32px; 
    height: 32px; 
    border: none; 
    background: url(../../assets/search.svg) no-repeat 50% 50%;
}

Comments

[Антон Горецкий]

в чем вопрос-то? В url надо кавычки для пути

background: url('../../assets/search.svg') no-repeat 50% 50%;

[WoodyAndBuzz]

Пишет ошибку.

Answer 1

[Ilya Olovyannikov]

Для таких путей используй изображения, которые расположены в директории public твоего приложения.
Например у тебя изображение лежит в public/img/image.png
Тогда путь в css будет background: url('./img/image.png');

Если задача хранить картинки рядом с компонентом, то импортируй изображение в React:
import image from './image.png'

Затем используй просто как src у тега img или инлайн-стилями в background

Comments

[WoodyAndBuzz]

Все равно не работает. Может надо в файл компонента js импортировать картинку?

[Ilya Olovyannikov]

WoodyAndBuzz, вроде я так и написал :)

[WoodyAndBuzz]

У меня реакт какой то не такой. По сути должен работать но не работает.

[Ilya Olovyannikov]

WoodyAndBuzz, давай код под кат или на codesandbox

[WoodyAndBuzz]

Это долго. Но он на sandox-е нормально идет а локально нет.