Next.js background-image css 属性无法加载图片

Question

问题只是我试图访问一个静态图像以在 React 的内联 backgroundImage 属性中使用。

我正在使用 reactjs 和 next.js，然后我遇到了使用 next.js 添加图像的问题，但通过使用名为的图像加载器解决了这个问题：Next.js + Images，

现在我可以使用普通的 html img 标签正常添加图像

示例： <img src={ img } /> 这有效。

但是当我尝试添加 css 背景图像时，如下所示：

 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>
);

}

这是 console.log 结果：

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

图像没有出现，然后没有发生错误，我尝试在浏览器中输入 website-url + console.log 结果图像出现了！

原文由 Hassan Kandil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当我使用 JSX 样式然后添加位置绝对属性时它工作得很好。

像这样：

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

原文由 Hassan Kandil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 next@11.0 我将我的图像放在公用文件夹中，然后在样式文件中我使用了以下内容并且它起作用了。

 background-image: url('/image.svg');

原文由 Peter W 发布，翻译遵循 CC BY-SA 4.0 许可协议