Angular 4/5 image path in html

Question

I have workspace structure that looks like this:

src/
   app/
   asset/
       img1.png
       img2.png
       img3.png

... As you can see, app folder and asset folder are on same level. My index file is inside src folder also. I'm trying to load image inside my component but can't make it show and i get error all the time something like:

GET http://localhost:4200/asset/img1.png 404 (Not Found)

my html looks like this:

<img style="height: 395px; width: 360px;" src="asset/img1.png">

Any solution for path?

Folder name is asset or assets? Angular by default creates assets. Please check — Sangwin Gawande
– Sangwin Gawande, Commented May 14, 2018 at 12:46
That is fine ...I have angular assets folder, but I created asset folder for my use — John Theoden
– John Theoden, Commented May 14, 2018 at 12:49
You will have to add this new folder ("asset") to the "assets" array in the angular json config file. Anyway, is there any good reason to use a different folder, rather than the default defined by angular's team? — Christian Benseler
– Christian Benseler, Commented May 14, 2018 at 12:56
I managed to move "asset" folder under my default angular "image" folder and change path to image/asset/img1.png and now it is working great. Thanks — John Theoden
– John Theoden, Commented May 14, 2018 at 13:00

Martin Nuc · Accepted Answer · 2018-05-14 12:49:33Z

1

By default the name of folder for assets is assets. This is set in .angular-cli.json in apps->assets settings.

When you put your files there you should be able to link them exactly like you do: <img style="height: 395px; width: 360px;" src="assets/img1.png">

answered May 14, 2018 at 12:49

Martin Nuc

5,7943 gold badges45 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Theoden Over a year ago

That is fine ...I have angular assets folder by default, but I created asset folder for my use and put images inside

Martin Nuc Over a year ago

In that case just add it to configuration I mention in the first paragraph. However I would recommend to use assets folder. That one is for your use :-)

Sangwin Gawande · Accepted Answer · 2018-05-14 13:33:02Z

1

Add your folder in .angular-cli.json file like following.

All the custom files that are created out of src folder needs to be added here.

"apps": [{
    "root": "src",
    "outDir": "dist",
    "assets": [
        "assets",
        "asset" // <-- Like this
    ],
........
}]

answered May 14, 2018 at 13:33

Sangwin Gawande

8,2548 gold badges53 silver badges67 bronze badges

Collectives™ on Stack Overflow

Angular 4/5 image path in html

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related