Answer a question

The issue simply is 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 img = require("../../assets/images/security-team.jpg");
const styling = {
    backgroundImage: `url('${img}')`,
    width:"100%",
    height:"100%"
}
console.log(img);
return (
    <dev className="team" style={styling}>

    </dev>
);

}

here was the console.log results :

/_next/static/images/security-team-449919af8999ae47eaf307dca4dda8e1.jpg

the image doesn't appear and no errors happened then, i tried to type in the browser website-url + the console.log results the image appeared !

Answers

when i used JSX styles then added position absolute property it worked just fine.

Like this:

 <style JSX>{`
    .team {
        width:100%;
        height:100%;
        position:absolute;
        background: url('`+img+`') no-repeat;
    }
`}</style>