Next.JS 中使用 SASS 的背景图像 [英] Background image in Next.JS using SASS

问题描述

我一直在尝试将此背景图像放入项目中，但它从未显示.没有错误表明存在问题.我在整个项目中使用 Next.JS 和所有其他图像加载正常.为了测试，我改变了背景的颜色，效果很好.

I've been trying to get this background image into a project but it never shows. No errors indicating there's a problem. I'm using Next.JS and all the other images through out the project load fine. To test I changed the color of the background and it worked fine.

我的 SASS 文件如下所示:

My SASS file looks like:

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
$primary-color: #24b4a8;
$secondary-color: #b3b5b5;
$background-color: #2d2f31;
$third-color: #222426;
$main-font: Montserrat;
$secondary-font: Raleway;

body {
  width: 100%;
  overflow-x: hidden;
  margin: 0;

  a {
    text-decoration: none;
  }
}

html .container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

section {
  padding: 7em;
  width: calc(100% - 4em);
  height: calc(100vh - 14em);
  scroll-snap-align: center;

  &:nth-of-type(1) {
    background-image: url("/public/background.svg");
    display: grid;
    grid-template-columns: repeat(6, 15%);
    grid-template-rows: repeat(6, 15%);

    .intro {
      display: flex;
      flex-direction: column;
      align-items: center;
      grid-column-start: 1;
      grid-column-end: 4;
      padding-top: 3em;

      h2 {
        font-size: 2em;
        font-family: "Courier New", Courier, monospace;
        color: $secondary-color;
      }

      h3 {
        font-size: 2.75em;
        color: $secondary-color;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
      }
    }

    h1 {
      font-family: "Montserrat", sans-serif;
      font-weight: 900;
      grid-column-start: 1;
      grid-row-start: 3;
      font-size: 20.25em;
      width: 100%;
      margin-left: -50%;
      padding-top: 17%;
    }
    .profile {
      display: flex;
      flex-direction: column;
      grid-column-start: 5;
      grid-row-start: 2;
      button {
        color: $primary-color;
      }

      img {
        size: 2em;
      }
    }
  }
  &:nth-of-type(2) {
    background: $secondary-color;

    .test-title {
      font-family: "Montserrat", sans-serif;
      font-weight: 900;
      font-size: 3em;
      margin: 90px auto;
    }

    .quotes {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 90px auto;
      max-width: 700px;

      p {
        text-align: center;
        margin-bottom: 20px;
        color: #45454d;
        font-size: 50em;
        margin-top: 25px;
        font-size: 2em;
      }

      blockquote {
        font-size: 1.75em;
        font-family: "raleway", sans-serif;
        font-weight: 900;
        color: $primary-color;
      }
    }

    .quote {
      display: flex;

      span {
        height: 20px;
        width: 20px;
        margin: 30 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      span::before {
        content: "";
        height: 6px;
        width: 6px;
        background-color: #d4d4d4;
        border-radius: 50%;
        transition: background-color 0.3s ease;
      }
      span:hover::before {
        background-color: #45454d;
      }

      span[data-quote="${active}"]::before {
        background-color: #45454d;
      }
    }

    blockquote::before {
      content: "201c";
      font-size: 4em;
      display: block;
      margin-bottom: -40px;
      margin-top: -40px;
    }
  }
  &:nth-of-type(3) {
    background: $background-color;
  }
}

我的 next.config.js 文件如下所示:

My next.config.js file looks like:

const withImages = require('next-images')
const withSass = require('@zeit/next-sass')
module.exports = withSass(withImages({
  webpack (config, options) {
    config.module.rules.push({
      test: /.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000
        }
      }
    })
    return config
  }
}))

我尝试过使用背景:URL("background.svg");背景:url(背景.png")；背景:网址(/public/background.png)；这些都不会返回图像或错误.

I've tried using background: URL("background.svg"); background: url("background.png"); background: url(/public/background.png); none of these return the image or an error.

非常感谢任何帮助，并在此先感谢！

Any help is greatly appreciated, and thanks in advance!

推荐答案

NEXT.JS已经提供官方支持 需要两步.

An official support had been provided by NEXT.JS Two steps are required.

1- 用具有样式的 div 包装 Image 组件(将提供示例).

1- Wrap the Image component with div which has styles (will provide example).

2- 为 Image 组件提供示例中提到的属性.

2- Provide the Image component with the attributes as mentioned in the Example.

演示:https://image-component.nextjs.gallery/background

文档:https://nextjs.org/docs/api-reference/next/图片

代码:https:///github.dev/vercel/next.js/blob/canary/examples/image-component/pages/background.js

这篇关于Next.JS 中使用 SASS 的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！