title: Next.js background-image css property cant load the image
body: <p>The issue simply is I'm trying to access a static image to use within an inline backgroundImage property within React.</p>
  
  <p>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,</p>
  
  <p>now i could add images normally with normal html img tag</p>
  
  <p>Example: <code>&lt;img src={ img } /&gt;</code> this works.</p>
  
  <p>but when i tried to add css background images as the following: </p>
  
  <pre><code>const team = (props) =&gt; {
  const img = require("../../assets/images/security-team.jpg");
  const styling = {
      backgroundImage: `url('${img}')`,
      width:"100%",
      height:"100%"
  }
  console.log(img);
  return (
      &lt;dev className="team" style={styling}&gt;
  
      &lt;/dev&gt;
  );
  </code></pre>
  
  <p>}</p>
  
  <p>here was the console.log results : </p>
  
  <blockquote>
    <p>/_next/static/images/security-team-449919af8999ae47eaf307dca4dda8e1.jpg</p>
  </blockquote>
  
  <p>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 ! </p>