部署至Github Pages后，Angular图片未能显示

Question

我刚接触Angular，最近将一个示例网页部署到Github Pages上。虽然成功部署，但在本地主机上可见的图片却未能显示出来，而是在控制台中记录了404错误。

这个组件包含以下img标签：

home.component.html :

<div>
    <img src='assets/images/birthday.jpg' alt='Happy Birthday' width="385px"/>
</div>

我的目录结构如下：

   |src
   |--app
   |--assets
    |---images
     |----birthday.jpg

< p > dist 文件夹中的目录结构如下：

   |dist
   |--happy-birthday
    |--assets
     |---images
      |----birthday.jpg

我正在使用angular-cli-ghpages包进行部署。我的Angular版本是10.0.14。

- muskaanshraogi

---

你能分享一下你的404错误吗？比如它必须明确定义了可能缺失的“图像路径”。 - Amod Shinde

Answer 1

尝试使用/assets/images/birthday.jpg。

- 0x6368656174

Answer 2

尝试明确给出相对路径（img相对于home.component.html的路径）。 下面给出一个示例，但这可能会根据您的目录结构而改变。

<div><img src='../assets/images/birthday.jpg' alt='Happy Birthday' width="385px"/></div>

- Mangly

Answer 3

我刚刚尝试了没有前导斜杠，它可以工作：src='assets/images/birthday.jpg'。

- Mohsen