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