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

问题只是我正在尝试访问静态图像以在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结果该图像出现了!

Lynn2022/03/04 10:05:09

有解决吗