I have a ponent structured like this:

<div style={{ backgroundImage: `url(${require("src/assets/images/loginImage.png")})`, backgroundSize: 'cover' }}>

my folder structure is the following :

Now, the image background shows up correctly when I run locally. But when I build and deploy online, the image doesn't show up.

The funny thing is that the icons do get loaded with no problems, and i refer to them in the same way

Does any of you have a clue on why this is happening?

Thanks

I have a ponent structured like this:

<div style={{ backgroundImage: `url(${require("src/assets/images/loginImage.png")})`, backgroundSize: 'cover' }}>

my folder structure is the following :

Now, the image background shows up correctly when I run locally. But when I build and deploy online, the image doesn't show up.

The funny thing is that the icons do get loaded with no problems, and i refer to them in the same way

Does any of you have a clue on why this is happening?

Thanks

• javascript
• css
• reactjs
• webpack

2 Answers 2

you can try this

import loginImage from "src/assets/images/loginImage.png";

<div style={{ backgroundImage: `url(${loginImage})`,backgroundSize: 'cover' }}>

If you are using react, the pattern is to use import statements instead of require. Based on your Webpack config, you might not be able to use an inline require.

"Dynamic imports make it impossible for a static analyzer to determine whether imported code is ever actually called.

... The authors of the ES2015 Modules specification solved this issue in the import spec. They did this by disallowing the dynamic use of import. This is invalid javascript:"

The CreateReactApp docs also specify using import statements. Doc links are below

import loginImage from "src/asets/images/loginImg.png"

<div style={{ backgroundImage: `url(${loginImage})`, backgroundSize: 'cover' }}>

See React Import vs Require

As a Create React App Docs