CODEWITHSUNDEEP
htmlimageangularangular-cli
UserName
UserName

Reputation: 75

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 ?

Upvotes: 1

Views: 4861

Answers (3)

BaneStar007
BaneStar007

Reputation: 417

Recently had the same issue in class with students,

When we did an ng build, and saw the dist folder didn't contain the images folder we created, looked around and found that an asset folder existed.

put the images into the assets folder and followed the path for that, the image appeared in the dist, and then the images popped up in serve.

Hope that helps others in the future.

(for version 15)

Upvotes: 0

aaron-bond
aaron-bond

Reputation: 3321

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.

Upvotes: 1

Zooly
Zooly

Reputation: 4787

Considering your app tree, wouldn't be images/settings.png ?

Your images folder is at the same height than index.html

Upvotes: 0

Related Questions