angular - 在 github 页面上部署 angular 应用程序后，图像未加载

Question

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

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

除了图像外，一切正常(在本地主机上，每个图像都在加载)。

angular.json 中的输出路径:

"outputPath": "dist/scrabble/",

angular.json 中的 Assets :

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

带有图像的 Assets 文件夹位于 <project_folder>/src/assets
一个在本地主机上完美运行但在 github 页面上无法加载的图像标签示例:

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

Answer 1

如果您的所有图像都在您的 Assets 文件夹中，您只需删除 ../ s 形成路径。

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

所以问题是一切都被转译和缩小， Assets 文件夹不再是 3 个目录。如果您在本地运行或部署它并且不需要相对路径，Angular 知道您的 Assets 文件夹在哪里。