Next.js background-image css property cant load the image

soup_sam

I'm trying to access a static image to use within an inline backgroundImage property within React. i am working with reactjs and next.js then i faced an issue with adding images with next.js but fixed this by using image loader called : Next.js + Images, now i could add images normally with normal html img tag Example: <img src={ img } /> this works. but when i tried to add css background images as the following: const team = (props) => { const...

Originally asked by Hassan Kandil on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

First import the image file import bg from '../../assets/images/security-team.jpg' then apply inline style style={{ backgroundImage: `url(${bg.src})`, width: '100%', height: '100%', }}

Full answer by M.Islam: https://stackoverflow.stackexchange.com/a/69539711 (CC BY-SA 4.0).

Need it done for your business? UphillTech.