Question 74356 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Not displaying Background image at the time of Build in React js – Reactjs

Hi my app running good at localhost but when I create build then Background image not displaying.
my code is.

    <div  style={{ backgroundImage:"url("+require("assets/img/bg.jpg")+")", height: "400px",
                      backgroundSize: "cover",
                      backgroundPosition: "center top"}}>

Result at localhost as below
enter image description here

But at live server empty header with path
enter image description here

When I inspect this path then showing like this.
background-image: url(./static/media/bg6.488bc24….jpg);
Please help with thanks

Tags:

3

Answers


  1. 0

    You can try importing the image outside of the function instead of requiring it.

    PS:- You can kindly attach a SS of your build folder for further info.

    Login or Signup to reply.
  2. 0

    Perhaps, upon build, programmatically defined path is being changed or appoints to an undesired resource.
    You could try to modify your DOM and apply css, by adding a dedicated tag, like so:

             <img
          id="background-image"
          src="./assets/img/bg.jpg"
          alt="background-image"
         />
    Login or Signup to reply.
  3. 0

    Put your file to public folder and replace require with string with path.

    For example put file to public/assets/img/bg.jpg

    And change path:

    {
  backgroundImage: "url(/assets/img/bg.jpg)"
  ...
}

    or you can use import and put imported image to img (src prop).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search