How to serve up images in Angular2? How to serve up images in Angular2? typescript typescript

How to serve up images in Angular2?


Angular only points to src/assets folder, nothing else is public to access via url so you should use full path

 this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg'

Or

 this.fullImagePath = 'assets/images/therealdealportfoliohero.jpg'

This will only work if the base href tag is set with /

You can also add other folders for data in angular/cli.All you need to modify is angular-cli.json

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

Note in edit :Dist command will try to find all attachments from assets so it is also important to keep the images and any files you want to access via url inside assets, like mock json data files should also be in assets.


If you do not like assets folder you can edit .angular-cli.json and add other folders you need.

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


Add your image path like fullPathname='assets/images/therealdealportfoliohero.jpg' in your constructor. It will work definitely.