Angular CLI - Images not showing after 'ng build'

Question

When I run ng build I have a problem. I try to load some image to my page, but these images are not shown. My console not is not throwing any 404 errors. All of my images are place in assets folder.

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

But if I run command ng serve it's works fine. Thank you for all your answers.

Here is my .angular.cli.json file

`{
  "$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": {}
  }
}`

did you verify if you build folder in location `../src/main/webapp` contains assets folder and a sub folder of img? — Ahmad, Jul 10 '17 at 17:17
yes, of course, my application is building to `../src/main/webapp/` folder. Here is my screenshot of `webapp` folder http://imgur.com/a/ktx0w — t.piwowarczyk, Jul 10 '17 at 17:22
oh sorry. I thought maybe it was what you saw in your ide, and maybe the src changes in the browser. — Mike Wight, Jul 10 '17 at 17:43

Przemek Olszewski · Answer 1 · 2017-07-11T04:25:38.073

0

I think you have the problem with the server. If you are trying to open your page by click on index.html, it will work only with js files without assets.

How do you start your server after build?

edited Jul 11 '17 at 04:25

answered Jul 10 '17 at 16:46

Przemek Olszewski

11
4

First of all I build the Angular project to the `webapp` folder and then I run the Spring Boot application – t.piwowarczyk Jul 11 '17 at 19:33
How I know Spring boot is server side application. Could you try run your application with nginx, apache or sth? Of course, best practice shows that output application shouldn't be in src. e.g. for coverage. – Przemek Olszewski Jul 13 '17 at 04:40

score 0 · Answer 2 · answered Jul 20 '17 at 17:19

It happened the same to me, and the problem was that I was forwarding requests on the server, so that the user was able to enter the application in a specific route. (I mean, for example, http://myangularapp.com/profile)

In my case, I built a jar with both a spring boot backend and an angular frontend and therefore needed that trick to allow angular to resolve the routes.

I believe something changed recently with angular-cli or angular, since I already used that strategy before and it was working fine.

By the way, this happened with "@angular/cli": "^1.2.0".

Angular CLI - Images not showing after 'ng build'

2 Answers2