0

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.

4
  • change the background image path to an absolute path instead of a relative path like this: background-image: url("./images/texture.jpg"); Commented Dec 24, 2019 at 6:40
  • try absolute path too like '/assets/images/texture.jpg' Commented Dec 24, 2019 at 6:52
  • this solution working in codesandbox, but not working when we do NPM START in local. i have download this codesandbox and tried. 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' Commented Dec 24, 2019 at 7:10

2 Answers 2

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

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

1 Comment

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?
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;
}

4 Comments

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'
@RahulShah you may keep the images inside an asset/images folder under src. It won't create any issue.
yes, I can add in assets, but for this case i have to put images in public for direct access from FTP.
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.