Username Username -4 years ago 130
HTML Question

Angular - Images won't display with relative path

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download