Question

我在src / assets / images /目录中有我的图像，而在html中，我像下面这样引用它们

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

这在开发人员模式下工作正常。但是在生产中却给出404错误。我已使用以下命令构建了应用程序

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

This部分介绍了prod angle将使用base-href标签中的内容解析图像路径。我检查了已编译的index.html页面，并且base-href指向/ myapp，但图像仍未解析。

Answer 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/">

使基本href

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

除了您可以合并路由器的应用程序基础和资产的基础（如果它们具有与/myapp/之类的基础）之外，因此无需指定deploy-url：

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

角度：图像未在生产中加载

1 个答案: