Angular CLI-在'ng build'后图像未显示

Question

当我运行ng build时，我遇到了问题。我尝试加载一些图片到我的页面，但是这些图片没有显示出来。控制台没有抛出任何404错误。所有的图片都放在assets文件夹中。

<div>
    <h1>Home</h1>
    <img src="assets/img/people/user-1.png" alt="user" />
</div>

但是如果我运行ng serve命令，它可以正常工作。

感谢您的所有回答。

这是我的.angular.cli.json文件。

`{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "../src/main/webapp",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}`

- t.piwowarczyk

---

你是否验证了位于 ../src/main/webapp 位置的构建文件夹中是否包含 assets 文件夹和一个名为 img 的子文件夹？ - Ahmad

是的，当然，我的应用正在构建到 ../src/main/webapp/ 文件夹。这是我 webapp 文件夹的截图 http://imgur.com/a/ktx0w - t.piwowarczyk

当您查看图像的源代码时，src=是什么？ - Mike Wight

已经写在我发布的顶部。 - t.piwowarczyk

哦，抱歉。我以为可能是你在IDE中看到的内容，而浏览器中的源代码发生了变化。 - Mike Wight

我得到了相同的错误。 - Thilina Sampath

Answer 1

我认为你的问题出在服务器上。 如果你试图通过点击index.html来打开你的页面，那么它只能与没有资源的js文件一起工作。

你是如何在构建后启动你的服务器的？

- Przemek Olszewski

---

首先，我将Angular项目构建到“webapp”文件夹中，然后运行Spring Boot应用程序。 - t.piwowarczyk

我如何知道Spring Boot是服务器端应用程序。你可以尝试使用nginx、apache或其他工具运行你的应用程序吗？ 当然，最佳实践表明输出应用程序不应该在src中，例如用于覆盖率。 - Przemek Olszewski

Answer 2

我也遇到了同样的问题，问题出在我在服务器上转发请求，以便用户能够进入特定路由的应用程序。（我的意思是，例如，http://myangularapp.com/profile）

在我的情况下，我构建了一个带有Spring Boot后端和Angular前端的jar包，因此需要这个技巧来允许Angular解析路由。

我相信最近Angular-cli或Angular发生了一些变化，因为我以前已经使用过这种策略，而且效果很好。

顺便说一句，这发生在"@angular/cli": "^1.2.0"中。

- diegofsza