Angular：图像未在生产中加载答案

【问题标题】：Angular: Images not loading in productionAngular：图像未在生产中加载
【发布时间】：2019-06-26 14:45:58
【问题描述】：

我在 src/assets/images/ 目录中有我的图像，在 html 中我指的是它们，如下所示

<img src="assets/images/penndot-logo-full.png" />

这在开发模式下运行良好。但在产品中它给出了 404 错误。我已经使用以下命令构建了我的应用程序

ng build --prod --deploy-url /myapp --base-href /myapp

This 部分解释说，在 prod 中，angular 将使用 base-href 标记中存在的内容解析图像路径。我检查了我编译的 index.html 页面，并且 base-href 指向 /myapp 但仍然没有解析图像。

【问题讨论】：

标签： angular

【解决方案1】：

Angular 使用基本 href 来告诉路由器如何编写导航 URL。如果您的应用程序存在于根目录，则可以使用 / 作为 href 值，如下所示。

<base href="/">

如果您使用默认值为生产环境构建 Angular 项目，您将生成以下 index.html。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>some title</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

但正如我所见，您的应用程序可能存在于名为 myapp 的生产模式下的子文件夹中

所以你需要像这样<base href="/myapp/">

因此，您的命令中缺少的部分是 /myapp/ 中的结尾斜杠，正如您从 Angular 官方文档中看到的那样：

此外，如果它们具有相同的基础，例如 /myapp/，您可以合并路由器的应用程序基础和资产基础，因此无需指定部署 URL：

ng build --prod --base-href /myapp/

【讨论】：

我也有同样的问题，但是当我使用时页面无法加载。