时间戳

首页 > 解决方案 > Next.js background-image css 属性无法加载图片

html - 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 结果图像出现了！

标签： htmlcssreactjsnext.js

解决方案

样式/home.scss 中的css 文件

公共/bg-img.png 中的图像文件

.content_bg {
    margin: 50px 0;
    background-image: url('../public/bg-img.png');
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
}

推荐阅读