Tailwindcss 背景图像未在部署时显示答案

【问题标题】：Tailwindcss background image not showing on deployTailwindcss 背景图像未在部署时显示
【发布时间】：2022-01-03 16:32:00
【问题描述】：

背景图片和导航栏背景都不会渲染。我正在使用 Vercel 和 Netlify 进行部署，并且在两个站点上都使用了 build 命令以及发布目录设置。因为我是第一次使用 Tailwind，所以尝试检查我的代码，但我仍然无法弄清楚出了什么问题？

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

任何信息都将不胜感激:)

【问题讨论】：

标签： javascript html css tailwind-css

【解决方案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）来自动化。

【讨论】：

【解决方案2】：

因为网站找不到资源。

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

因此，您应该正确存储和链接您的资源，或者学习使用捆绑技术，例如网页包。

【讨论】：