CODEWITHSUNDEEP
cssreactjsbackground-imagecss-loader
Nhat
Nhat

Reputation: 409

I cannot use folder path in css in my react app

I cannot set img background in css at all in my react app. but if I style and set img from react component then it works fine, can someone help me out

this will work

const style={
    width:'300px',
    height:'200px',
    backgroundImage: 'url(pictures/backgroundPics/1.jpg)'
}

const Test =()=>(  
    <div style={style}/>
)

but this won't

import './test.css'

const Test =()=>(  
    <div className='test'/>
)

css

.test{
    background-color: gray;
    width: 300px;
    height: 200px;
    background-image: url(../../public/pictures/randomPics/1.jpg)
}

i have tried to set my css path to many ways I can think of including setting it relative to css file or html file but it either gives me module not found or parse error. my Test component path is src/test/test.js and my css file is in the same test folder. I am using css-loader v0.28.4

It will work if I set web address as the url

background-image: url(http://www.pvhc.net/img226/gzypyldoqaxjhvtyyhei.png)

enter image description here

Upvotes: 0

Views: 59

Answers (1)

Waseem
Waseem

Reputation: 761

There's no need to relativity reference the public directory in your CSS. Have you tried:

background-image: url(/pictures/randomPics/1.jpg)

Upvotes: 1

Related Questions