当ng build-prod部署在Web服务器的子文件夹中时，映像路径不正确

Question

首先，我需要说的是，我刚开始使用angular，我不明白问题出在哪里。

我有一个标题组件，链接到一个图像

<span><img src="./assets/images/logo.png" routerLink="" height="92" width="268"/></span>

当我运行ng-serve时，图像会显示在浏览器中。当我用ng-build--prod构建一个生产版本时，它会生成一个dist文件夹，到目前为止一切都很好。当我将dist文件夹中的所有文件上传到Web服务器上的子文件夹时，图像链接会断开。在index.html文件中，我手动将基本标签更新为

<base href="/subfolder/">

当我点击www.myDomain/subfolder/index.html时，我看到的页面没有图像。

当我在我的头组件中检查图像的链接时，它看起来像这样：

<img _ngcontent-c1="" routerlink="" src="../assets/images/logo.png" tabindex="0" width="268" height="92">

当然，我可以将dist文件夹向上移动一级，问题就解决了，但他们可能是配置angular项目的更好方法吗？

Answer 1

仅作为快速修复，在dist文件夹中，将Index.html文件更新为<base href="./">

正确的方法是将angular.json文件配置为构建并将服务于不同的baseHref:

{
...
"projects": {
"Your-Project-Name": {
...
"architect": {
"build": {
...
"options": {
...
"baseHref": "./",
...
},
...
},
"serve": {
...
"options": {
...
"baseHref": "/",
...
}
...
}
...
}
...
}
...
}
...
}