I'm trying to show the background image using css in react. I have stored all the images in an assets folder. All the image files are stored locally. Folder Structure

Whenever I'm trying to show the image in the background, its not working.

    .hero {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/1.jpg");
  background-size: cover;
  background-position: center;
}

Local images not working

But if i use external image link. Then its working.

.hero {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("https://images.unsplash.com/photo-1528127269322-539801943592?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
  background-size: cover;
  background-position: center;
}

external images are working

Do you guys have any solution for that? '

CodePudding user response：

Your problem is related to image format. If you change your locale image to another, it works. Try to change the image to another for testing. I recommend png format.

CodePudding user response：

i think, its the issue of your path or the name of the image, please use the name instead of number example 1.jpg to one.jpg. and check the extension of the image, is image has jpg extension of jpeg. move image in the src folder. hope this will helps you.