图像在我的本地环境中加载，但不在github页面中

Question

我正在使用 Tailwind 提供的解决方案来实现亮/暗模式，但我遇到了问题。这个问题与浅色和深色模式功能本身无关，而是与构成 Github 页面上的浅色/深色模式按钮的图像的加载有关。

正如您在下面的链接中看到的，当您单击按钮时，亮/暗模式功能可以工作，但是图像“sun.svg”和“moon.svg”不会加载。 有谁知道为什么这些没有被加载？

Github页面网站：https://cristianolm.github.io/tailwind-dark-light-mode/

这里是相应 github 存储库 以及两个图像的链接；一个显示了我在 VS Code 中的环境（可以很容易地看到我的文件夹结构和连接图像的 tailwind 类），另一个显示了正在我的本地环境中加载的图像之一。

我的VS代码：

项目在Live Server上运行时按钮上的“sun.svg”图像：

Answer 1

图像部署到：

• https://cristianolm.github.io/tailwind-dark-light-mode/img/moon.svg

• https://cristianolm.github.io/tailwind-dark-light-mode/img/sun.svg

使用所写的路径，

/img/moon.svg

和

/img/sun.svg

，这些将解析为：

• https://cristianolm.github.io/img/moon.svg

• https://cristianolm.github.io/img/sun.svg

因此，当浏览器请求时，它们不会加载并导致 404 HTTP 响应。

您可以考虑更改路径，使它们相对于

src/output.css

样式表，例如：

<div class="… after:bg-[url(../img/moon.svg)] … peer-checked:after:bg-[url(../img/sun.svg)] …">