如何在 next.js 中使用 tailwind 背景图片？

Question

我在公共文件夹中有一张背景图片，名为bg.png

在页面文件夹的index.js页面中，我想使用该图像作为背景图像

我已经按照他们的官方网站的文档安装了 tailwind 。

我已经尝试过这个，但它不起作用。

从“../public/bg.png”导入BG；

return (
  <div
    className="bg-scroll"
    style={{
      backgroundImage: `url(${BG})`,
      height: "972px",
    }}
  >
  </div>
)

它不显示图像。

Answer 1

当您在公共文件夹中拥有资产时，无需定义所有确切路径。

  <div
   className="bg-scroll"
   style={{
    backgroundImage: `url('/bg.png')`,
     height: "972px",
    }}
  >
</div>

Answer 2

另一种方法是您可以将文件中的图像定义tailwind.config.js为类似这样

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        'my_bg_image' : "url('../public/bg.png')",
      }
    },
  },
  plugins: [],
}

然后直接在组件中使用它bg-my_bg_img。无需导入图像。

return (
  <div
    className="bg-scroll bg-my_bg_image h-[972px]"
  >
  </div>
)

Answer 3

以下是您如何使用 Tailwind 完成这一切。您也不需要import图像。

return (
  <div
    className="bg-scroll bg-[url('/bg.png')] h-[972px]"
  >
  </div>
)