Background Image not showing on build React

Question

I have a component 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

Answer 1

you can try this

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

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