图像未加载到文档目录托管的 GitHub 页面中

Question

我的图像未在 GitHub 页面中加载，并且我的

href

中的

/docs/index.html

是“/SindhuApp/

我正在从 GitHub 中的

/docs

进行部署。

这是来自文件

src/app/login/login.component.html

：

<div>
<p class="Anime"><img src="src/assets/angular5.png" alt="Angular Image" style="height: 70px; width:80px;" >
    <img src="docs/assets/ts.png" alt="TS Image" style="height: 70px; width:70px"> 
    <img src="docs/assets/html.png" alt="HTML Image" style="height: 75px; width:75px">
    <img src="docs/assets/css.png" alt="CSS Image" style="height: 75px; width:75px">
    <img src="docs/assets/material.png" alt="Material Image" style="height: 65px; width:70px"></p>
</div>

我看不到图像，这是我的投资组合项目。我尝试了堆栈溢出中的所有解决方案，但没有一个对我有用。但除了图像之外，所有页面都可以正确加载。

Answer 1

由于您的网站是从

docs/

目录托管的，因此您的导入路径需要反映这一点。目前，导入路径是相对于存储库根而不是

docs/

目录配置的。

在这种情况下，修复此问题非常简单，您只需从导入路径中删除

docs/

前缀，如下所示：

<div>
<p class="Anime"><img src="assets/angular5.png" alt="Angular Image" style="height: 70px; width:80px;" >
    <img src="assets/ts.png" alt="TS Image" style="height: 70px; width:70px"> 
    <img src="assets/html.png" alt="HTML Image" style="height: 75px; width:75px">
    <img src="assets/css.png" alt="CSS Image" style="height: 75px; width:75px">
    <img src="assets/material.png" alt="Material Image" style="height: 65px; width:70px"></p>
</div>

还请记住，

docs/

将是托管时的根目录，因此您无法访问

docs/

的同级目录（例如

src/

），即使使用反映正确位置的导入路径（例如

../src/

将不起作用） 。如果您需要访问其他资源，也需要将它们放置在

docs/

中。

另一件事需要注意的是，GitHub Pages 的导入路径区分大小写，如下所述：图像未在 Github Pages 中显示？.