Angular - Images won't display with relative path

Question

I am using relative path to display images in my application. It was working perfectly until I update my application to the latest version of Angular (4.1.3). I don't have any errors and my images don't display anymore.

I have in app.component.html :

<img src="/src/images/settings.png" />

My app structure :

► e2e
► node_modules
► obj
▼ src
    ▼ app
        app.component.html
        app.component.ts
        app.module.ts
    ► assets
    ► environments
    ▼ images
        settings.png
    index.html
    main.ts
    polyfills.ts
    styles.css
    tsconfig.app.json
    tsconfig.spec.json
    typing.d.ts
.angular-cli.json
.editorconfig
.gitignore
karma.conf.js
package.json
protactor.conf.js
tsconfig.json
tslint.json

I tried many paths as suggested in this question but none is working. And the difference with this question is that I do not have any error, my application is working, the images are just not displaying. And the weird thing is that it was working perfectly before I update my application.

Any ideas where this might come from ?

Answer 1

You're using angular-cli. Make sure you have images in your app.assets[] block in the .angular-cli.json so that it's packaged up the same way your assets directory is. Then, change the path to images/settings.png

Alternatively, you can move the images directory inside the assets folder which should already be packaged.