Next.js中配合Tailwind CSS设置背景图片不显示如何解决

代码不生效核心是两个问题：

• Next.js 中public目录属于静态公开目录，里面的资源不需要、也不支持通过import方式引入，这类资源直接通过根路径访问即可，你写的import BG from "../public/bg.png"拿不到正确的资源地址
• 你只给元素加了bg-scroll类，缺少背景图显示必要的重复规则、定位、适配类，就算路径正确也可能出现显示异常

删掉错误的import语句，直接用根路径引用图片即可，注意public下的资源引用时不需要加/public前缀，直接写/文件名：

// 删掉这行错误的引入代码
// import BG from "../public/bg.png";

return (
  <div
    className="bg-scroll bg-no-repeat bg-cover bg-center"
    style={{
      backgroundImage: `url('/bg.png')`,
      height: "972px",
    }}
  >
    {/* 页面其他内容写在这个容器内部 */}
  </div>
)

用到的几个Tailwind背景类可以按需调整：

• bg-no-repeat：禁止背景图重复平铺
• bg-cover：让背景图自适应铺满整个容器，不会拉伸变形
• bg-center：让背景图在容器内居中显示

如果改完还是不显示，先直接在浏览器地址栏访问 http://localhost:你的服务端口/bg.png：

• 能正常打开图片：说明路径没问题，检查容器高度、背景相关类是否写对
• 打不开图片：检查bg.png是不是真的放在项目public文件夹根目录，有没有写错文件名、出现大小写错误（Linux部署环境对文件名大小写敏感）

如果你坚持要用import方式引入图片，就不要把图片放在public目录，把图片移到和pages同级新建的assets目录下，再正常import使用即可。public目录本身的设计定位，就是存放不需要构建处理、直接通过路径访问的静态资源。

内容的提问来源于stack exchange，提问作者Nasem