Angular 7 应用程序的 Tomcat 上的图像路径答案

【问题标题】：Image path on Tomcat for Angular 7 applicationAngular 7 应用程序的 Tomcat 上的图像路径
【发布时间】：2019-03-17 17:28:35
【问题描述】：

我在 Windows 机器（Windows 10、Visual Studio Code 1.30.2）和运行在 AWS 上托管的 Ubuntu 18.04 服务器上的 Tomcat 9 上的本地开发存在不同的图像源路径问题。在 Powershell 中基于 Windows 10 构建：

ng build --prod --base-href /myapp/

顺便说一句，如果使用 git bash 构建，它会完全弄乱路径，不要这样做。

如果我希望这个应用程序在本地 Windows 机器上运行，并且如果我希望拥有可点击（在 VSCode 中）到图像源的正确路径，而不是我必须使用：

index.html

<base href="/">

在一些组件中，例如：home.component.html

...
<img src="../../assets/data/avatar.png" width=100 />
...

但它希望在部署到 Tomcat 时显示图像。我想文件权限没有问题，因为整个项目作为“dist”文件夹（）的内容上传到 Linux 服务器，然后通过 Tomcat UI 管理器进行部署。除此之外，所有其他工件都已正确加载。

所以，要让它在 Tomcat 中显示，我必须使用：

index.html

<base href="./">

在一些组件中，例如：home.component.html

  ...
    <img src="assets/data/avatar.png" width=100 />
  ...

已经有一段时间没有部署了，但我不记得在 Windows 和 Linux 中的相对路径应该有区别吗？我哪里做错了？

【问题讨论】：

【解决方案1】：

在 Angular 构建项目后，检查 dist 文件夹的目录结构。您会注意到asset 目录与index.html 平行。因此，考虑到这个目录结构，您需要提供资产的路径。

因此，在您的模板中，您可以参考以下资产 -

<img src="./assets/data/avatar.png" width=100 />

【讨论】：