I cannot use folder path in css in my react app

Question

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)

Waseem · Accepted Answer · 2018-01-19 02:36:07Z

1

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

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

edited Jan 19, 2018 at 2:36

answered Jan 19, 2018 at 2:33

Waseem

7611 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nhat Over a year ago

it does not work for me, I tried that. I included my error in my question, please take a look, thanks

Waseem Over a year ago

I meant to include /pictures not pictures. I updated the snippet above.

Collectives™ on Stack Overflow

I cannot use folder path in css in my react app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related