css 在nextjs中将背景图像设置为div不工作

8aqjt8rx 于 12个月前发布在其他

关注(0)|答案(2)|浏览(149)

我是nextjs的新手，我不明白为什么没有为这个div设置背景图像。在根目录中，我有一个名为public的文件夹，我有art-thing.jpg文件在. styles.css是在根目录. index.js是在根目录的页面目录.我可以设置背景的颜色，但我不能设置它的图像.有一个帖子的人与一个类似的问题，但我想我的CSS不内联。
styles.css

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
}
.page-container {
    height: 100vh;
    position: relative;
}

.page-container-welcome {
    height: 100vh;
    position: relative;
    background-size: cover;
    background-image: url("/public/img/Branding/art-thing.jpg");
}
.content-wrap{
    padding-bottom: 2.5rem;
}

字符串
index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import Head from 'next/head';
import HekateNav from "../client/components/nav";
import Footer from "../client/components/footer";

function Home() {
    return (
        <div>
            <Head>
                <title>Hekate</title>
            </Head>

            <div className="page-container-welcome">
                <div className="content-wrap">
                    <HekateNav/>
                </div>
            </div>
            <Footer/>
        </div>
    );
};
export default Home

型
我得到的控制台错误

DevTools failed to load SourceMap: Could not load content for http://localhost:3000/_next/static/css/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

型

css

来源：https://stackoverflow.com/questions/62009172/setting-background-image-to-a-div-in-nextjs-not-working

2条答案

按热度按时间

tgabmvqs1#

解决方案是通过删除公共路径来更改图像的路径。回答是here。将路径更改为/img而不是/public/image。在这种情况下，/public是网站的实际根目录。

.page-container-welcome {
    height: 100vh;
    position: relative;
    background-size: cover;
    background-image: url("/img/art-thing.jpg");
}

字符串

赞(0）回复(0）举报 12个月前

rdlzhqv92#

试试这个.
Step1.
使用此链接安装“下一个映像”https://github.com/twopluszero/next-images

//next.config.js

const withImages = require("next-images");
module.exports = withImages();

字符串
Step2.
导入目标图像并将其用于定制样式中，如以下代码所示。

//index.js

import artImage from '/image/Branding/art-thing.jpg'
//don't use public folder to use static image, make 'image' folder in root path

const useStyles = makeStyles(()=>{
   pageContainerWelcome: {
      height: '100vh',
      background: 'url(' + artImage + ')',
      ...
      ...
   },
}

型

赞(0）回复(0）举报 12个月前

我来回答

css 在nextjs中将背景图像设置为div不工作

2条答案

相关问题

热门标签

最新问答