angular - Angular 7 应用程序在 Tomcat 上的图像路径

Question

我在 Windows 机器(Windows 10、Visual Studio Code 1.30.2)和在 AWS 上托管的 Ubuntu 18.04 服务器上运行的 Tomcat 9 上进行本地开发时遇到了不同的图像源路径问题。基于 Windows 10 的 Powershell 构建:

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 的相对路径应该有区别？我哪里做错了？

Answer 1

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

因此，在您的模板中，您可以如下引用您的 Assets -

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