backgroundImage path for css from public folder not working after build in reactjs

Question

I have added image path from public folder in App.css

It's working in local but not working after generating a build.

You may access my code on codesandbox at below path:

https://codesandbox.io/s/reactimagepath-sjtri

Please check and guide me towards solution.

change the background image path to an absolute path instead of a relative path like this: background-image: url("./images/texture.jpg"); — Ali Torki
– Ali Torki, Commented Dec 24, 2019 at 6:40
this solution working in codesandbox, but not working when we do NPM START in local. i have download this codesandbox and tried. — Rahul Shah
– Rahul Shah, Commented Dec 24, 2019 at 7:08
showing below error: Failed to compile. ./src/styles.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/styles.css) Module not found: Can't resolve './images/texture.jpg' in '/Users/hemant/Rahul/reactimagepath/src' — Rahul Shah
– Rahul Shah, Commented Dec 24, 2019 at 7:10

akhtarvahid · Accepted Answer · 2019-12-24 07:22:47Z

1

Move your images folder inside src folder

src/images/texture.jpg

and replace your background-image: url("./images/texture.jpg");

or background-image: url("../images/texture.jpg");

.App {
  font-family: sans-serif;
  text-align: center;
  background-image: url("./images/texture.jpg");  // or url("../images/texture.jpg");
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}

Reference- when to use public folder reactjs recommendation

edited Dec 24, 2019 at 7:22

answered Dec 24, 2019 at 6:49

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

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

1 Comment

Rahul Shah Over a year ago

I want my all images in root after generating build so i have added in public. is there any other solution to target image from public folder?

meDeepakJain · Accepted Answer · 2019-12-24 06:41:45Z

0

Try modifying your css like this:

.App {
  font-family: sans-serif;
  text-align: center;
  background-image: url("./images/texture.jpg");
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}

answered Dec 24, 2019 at 6:41

meDeepakJain

1641 silver badge14 bronze badges

4 Comments

Rahul Shah Over a year ago

showing below error: Failed to compile. ./src/styles.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/styles.css) Module not found: Can't resolve './images/texture.jpg' in '/Users/hemant/Rahul/reactimagepath/src'

meDeepakJain Over a year ago

@RahulShah you may keep the images inside an asset/images folder under src. It won't create any issue.

Rahul Shah Over a year ago

yes, I can add in assets, but for this case i have to put images in public for direct access from FTP.

meDeepakJain Over a year ago

I've not encountered this case but one of my colleague suggests reinstalling of webpack as it worked for him. npm install --save-dev webpack. Please see if that works in your case. And, if not, I'd suggest you to share the screenshot of the complete error.

Collectives™ on Stack Overflow

backgroundImage path for css from public folder not working after build in reactjs

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related