Question

我在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的相对路径应该有所不同吗？我在哪里出错了？

Answer 1

一旦角度构建了项目，请检查let wrapper = mount(<Provider store={store}><Component /></Provider>);文件夹中的目录结构。您会注意到dist目录与asset平行。因此，您需要考虑此目录结构来提供资产的路径。

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

index.html