部署后不显示背景图像

Question

我正在为 css 使用 Nextjs 和 Tailwind。我部署到 vercel，因为它针对 Nextjs 进行了优化，但我的背景图像在部署后没有显示。

回购：https://github.com/Dayropo/tkbrown 站点：https://tkbrown-6di53m6xz-dayropo.vercel.app

当我检查开发者工具时，我看到了这个

.bg-swirl { background-image: url(webpack:///mini-css-extract-plugin/_next/static/media/swirl_t1.8b530f8a.png) }

Answer 1

将您的 tailwind.config.json 更改为这些：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        playfair: "Playfair Display, serif",
        hind: "Hind, sans-serif",
        poppins: "Poppins, sans-serif",
        oswald: "Oswald, sans-serif",
      },
      fontSize: {
        "4.5xl": "2.5rem",
      },
      backgroundImage: {
        swirl: "url('/swirl_t1.png')",
        about: "url('/about-background.png')",
        aboutCloud:
          "url('https://res.cloudinary.com/dayropo/image/upload/v1650049471/about-background_zhkq9b.png')",
      },
      colors: {
        modal: "rgb(0, 0, 0, 0.9)",
        gravy: "#FFFFFF80",
        opa: "rgb(0, 0, 0, 0.5)",
        dark: "#777777",
      },
    },
  },
  plugins: [],
}

background-image: url('') 应该有 ' 或 "

部署后不显示背景图像

Background Images not showing after deployment

reactjs

webpack

next.js

vercel

tailwind-css