React and Mui, background is missing on component in one location, same implement

Issue

React 16 - functional components w hooks

Mui 4 -

We have a few different login pages and i am adding a simple background pattern to the page behind the login. easy peas right?

here is what one login page component returns

  return (
    <Box width={1} height={1}>
      <Box style={{backgroundImage: "url('images/logoBlack.png')", backgroundSize: "cover", opacity: ".10", width: "100%", height: "100%", position: "absolute"}} />
      <Box style={{position: "relative"}} pt={10}>
        {thing1.success
          ? <Box pb={30}>
            <thingOne />
          </Box>
          : <Box pb={30}>
            <thingTwo />
          </Box>
        }
      </Box>
    </Box>
  );

in one of my main password routes i have a similar component, which i've done a similar implement on. i couldnt get the image to render in the other location. after messing around w different imports i decided to try the known good/working component. when i placed it on the other route, it too stopped rendering the image.

i literally switched the route where the image didnt render to the component that was working, and it stopped working on that route.

no errors in console, no failed to import messages. even the css props in the inspector show the same exact line of text next to background-image. i just dont see it anythwere. have tried peeling back layer on the inspector, messing w position, etc, you never see the image on the "bad" route.

both routes are in the main App.js component, both done the same way. both are public only, same configs..scratching my head here

any ideas on where to start.

my gut is telling me maybe MUI bug, or possible how we have it all bundled/webpack

Solution

You are specifying the image using a relative URL (url('images/logoBlack.png')). If the two routes are different prior to the final "/", then the image path will be incorrect for one of them. I suspect that if you look at the network tab in developer tools, you will find two different image paths being requested with one of them resulting in a 404.

You should be able to fix it by using a URL that is not relative (i.e. use a URL that starts with a /).

Answered By - Ryan Cogswell