Установка фонового изображения на div в следующем js не работает - PullRequest
Новая
       13

Установка фонового изображения на div в следующем js не работает

2 голосов
/ 25 мая 2020

Я новичок в следующем js, и я не понимаю, почему фоновое изображение не устанавливается для этого div. В каталоге root у меня есть папка publi c, в которой находится файл art-thing.jpg. styles.css находится в каталоге root. index.js находится в каталоге страниц в каталоге root. Я могу установить цвет фона, но не могу установить его на изображение. Есть сообщение кого-то с похожей проблемой, но я бы хотел, чтобы мой css не был встроенным.

стили. 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

1 Ответ

1 голос
/ 26 мая 2020

Решение состояло в том, чтобы изменить путь изображения, удалив путь publi c. Ответили здесь . Измените путь на / img вместо / public / image. / publi c в данном случае является фактическим root сайта. 

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