Next.JS 中使用 SASS 的背景图像

Question

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.

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;
  }
}

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
  }
}))

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!

Answer 1

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

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

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

Demo: https://image-component.nextjs.gallery/background

Documentation: https://nextjs.org/docs/api-reference/next/image

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