Question

我使用以下命令在github页面上部署了一个测试项目：

ng build --prod --base-href https://<profile_name>.github.io/<repo_name>/
ngh --dir=dist/scrabble

除了图像（在本地主机上，每个图像都正在加载）之外，其他所有东西都可以正常工作。

angular.json中的outputPath：

"outputPath": "dist/scrabble/",

angular.json中的资产：

"assets": [
  "src/favicon.ico",
  "src/assets"
],

包含图像的资产文件夹位于<project_folder>/src/assets

一个图像标签示例，可以在localhost上正常运行，但不能在github页面上加载：

  <img src="../../../assets/scaledlogo.png" routerLink="/menu" />

Answer 1

如果所有图像都位于资源文件夹中，则只需从路径中删除../即可。

 <img src="assets/scaledlogo.png" routerLink="/menu" />

所以问题是一切都已被转译和最小化，并且assets文件夹不再返回3个目录。 Angular知道资产文件夹在本地运行还是已部署，并且不需要相对路径。

Answer 2

您需要传递--deploy-url选项。您的情况应该是

ng build --prod --base-href https://<profile_name>.github.io/<repo_name>/ --deploy-url=https://<profile_name>.github.io/<repo_name>/

Answer 3

删除前面的“ ../”并提及从assets文件夹开始的路径下面将解决您的问题

<img src="assets/scaledlogo.png" routerLink="/menu" />

如果资产中有其他文件夹，请继续使用该路径。例如：

<img src="assets/images/leave-procedure/admin1.png" width="400" height="150">

希望这会有所帮助。

Answer 4

要检查的事情清单：