CODEWITHSUNDEEP
javascripthtmlangular
HalfLegend
HalfLegend

Reputation: 323

How to find resource in relative path in Angular

My app structure is like: 

index.html
main.ts
app
 |--main.component.html
 |--main.component.ts
 |--app.module.ts
 |--note.png
... etc

I want to use the note.png in main.component.html which is under the same folder. I tried <img src="note.png"/> and <img src="./note.png"/>, but the picture is not shown. The browser goes to /note.png to search for the picture.

Is there any good way to locate the resource using relative path?
I cannot use because I may have many pages under different folders, their base href are different.

Upvotes: 1

Views: 3619

Answers (1)

DeborahK
DeborahK

Reputation: 60626

If you are using the Angular CLI, you can put your assets in any folders that you want. You just need to then add those folders to your .angular-cli.json file here:

  "assets": [
    "assets",
    "favicon.ico"
  ],

So if you wanted some of your images in an img folder, you'd modify it like this:

  "assets": [
    "assets",
    "img",
    "favicon.ico"
  ],

Hope that helps.

Upvotes: 3

Related Questions