How to find resource in relative path in Angular

Question

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.

Angular is different from the normal html structure. In normal html, if we visit main.component.html, the url will be like /app/main.component.html. So if we use relative path in the html, it will goes to /app/note.png. But in Angular, the url is /index.html, but actually the page of main.component.html will be shown. Is there any way to solve this problem? — HalfLegend
– HalfLegend, Commented Nov 3, 2017 at 6:02
Thanks very much for replying. Is there ng-src in Angular? I am not using AngularJS. Even if I may use ng-src, what about those in style, like: style="background-image: url(note.png); " — HalfLegend
– HalfLegend, Commented Nov 3, 2017 at 6:10
I believe you need to save it in an "Assets" folder at the root level of your app. eg: "your-application\src\assets\note.png" — gavgrif
– gavgrif, Commented Nov 3, 2017 at 6:18

DeborahK · Accepted Answer · 2017-11-03 06:49:29Z

3

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.

answered Nov 3, 2017 at 6:49

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

2 Comments

HalfLegend Over a year ago

Thank you very much, but I want to put my images in the same folder with ts and html who use the image. I don't want to create a asserts folder to store all the pictures of all the pages

gyc Over a year ago

I believe you can configure webpack to get assets from anywhere, but it's horrible. Just use assets and organize it correctly. 1 folder per component for example.

Collectives™ on Stack Overflow

How to find resource in relative path in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related