在 nextjs 中將背景圖像設置為 div 不起作用

Question

我是 nextjs 的新手，我不明白為什么沒有為這個 div 設置背景圖像。 在根目錄中，我有一個名為 public 的文件夾，其中包含art-thing.jpg文件styles.css在根目錄中。 index.js位於根目錄的 pages 目錄中。 我可以將背景設置為顏色，但不能將其設置為圖像。 有人有類似問題的帖子，但我希望我的 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

Answer 1

解決方案是通過刪除公共路徑來更改圖像的路徑。 它在這里得到了回答。 將路徑更改為 /img 而不是 /public/image。 /public 在這種情況下是站點的實際根目錄。

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

Answer 2

嘗試這個。

步驟1。

按照此鏈接安裝“下一個圖像” https://github.com/twopluszero/next-images

//next.config.js

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

第2步。

導入您的目標圖像並將其使用到自定義 styles 中，就像此代碼一樣。

//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 + ')',
      ...
      ...
   },
}

在 nextjs 中將背景圖像設置為 div 不起作用

問題描述

2 個解決方案

解決方案1
5 已采納 2020-05-25 21:11:25

解決方案2
0 2020-11-26 22:58:05

在 nextjs 中將背景圖像設置為 div 不起作用

問題描述

2 個解決方案

解決方案1 5 已采納 2020-05-25 21:11:25

解決方案2 0 2020-11-26 22:58:05

解決方案1
5 已采納 2020-05-25 21:11:25

解決方案2
0 2020-11-26 22:58:05