部署时未显示 Tailwindcss 背景图像

Question

背景图片和导航栏背景均未呈现。我正在使用 Vercel 和 Netlify 进行部署，并在两个站点上都使用了构建命令和发布目录设置。自从我第一次使用 Tailwind 以来尝试检查我的代码，但我仍然无法弄清楚哪里出了问题？

回购：https://github.com/d4nky/Tailwindcss-Portfolio
站点：https://inspiring-carson-2c8f1d.netlify.app

如有任何信息，我们将不胜感激:)

Answer 1

您还必须将 img 目录也放入您的 dist 中，因为目前您使用的路径 /img/background.jpg 指的是 repo /dist/img/background.jpg 文件，该文件不存在。

您可以在控制台中查看，其中显示：

GET https://inspiring-carson-2c8f1d.netlify.app/img/background.jpg [HTTP/1.1 404 Not Found]

logo_size.jpg也是如此。

你可以手动将这些目录直接放到 dist 目录，或者使用一些打包工具，比如 webpack 来自动化。

Answer 2

因为站点找不到资源。

您在index.html中指定的link为相对路径，绝对路径为path/to/index/ + value/of/src。例如，您的页面实际上会在 repo-root/dist/dist/.

中查找 main.js

所以您应该正确存储和 link 您的资源，或者学习使用捆绑技术，例如webpack.

部署时未显示 Tailwindcss 背景图像

Tailwindcss background image not showing on deploy

html

javascript

css

tailwind-css