How to serve up images in Angular2

Question

I am trying to put the relative path to one of my images in my assets folder in an image src tag in my Angular2 app  I set a variable in my component to  fullImagePath  and used that in my template  I have tried many different possible paths  but just cannot seem to get my image up  Is there some special path in Angular2 that is always relative to a static folder like in Django    Component  import   Component  OnInit   from   angular core     Component     selector   app-hero     templateUrl     hero component html     styleUrls      hero component css       export class HeroComponent implements OnInit     fullImagePath  string     constructor         this fullImagePath          assets images therealdealportfoliohero jpg         ngOnInit              I also put the picture into the same folder as this component  so since the template  and css in the same folder is working I m not sure why a similar relative path to the image is not working  This is the same component with the image in the same folder   import   Component  OnInit   from   angular core     Component     selector   app-hero     templateUrl     hero component html     styleUrls      hero component css       export class HeroComponent implements OnInit     fullImagePath  string     constructor         this fullImagePath      therealdealportfoliohero jpg         ngOnInit              html   lt div class  row  gt       lt div class  col-xs-12  gt           lt img  src   fullImagePath  gt       lt  div gt   lt  div gt    app tree   I left out the node modules folder to save space   -- README md  -- angular-cli json  -- e2e         -- app e2e-spec ts         -- app po ts         -- tsconfig json  -- karma conf js  -- package json  -- protractor conf js  -- src         -- app                -- app component css                -- app component html                -- app component spec ts                -- app component ts                -- app module ts                -- hero                       -- hero component css                       -- hero component html                       -- hero component spec ts                       -- hero component ts                       -- portheropng png                -- index ts                -- shared                    -- index ts         -- assets                -- images                    -- therealdealportfoliohero jpg         -- environments                -- environment dev ts                -- environment prod ts                -- environment ts         -- favicon ico         -- index html         -- main ts         -- polyfills ts         -- styles css         -- test ts         -- tsconfig json         -- typings d ts  -- tslint json

User · Answer

I am using the Asp Net Core angular template project with an Angular 4 front end and webpack  I had to use    dist assets images   in front of the image name  and store the image in the assets images directory in the dist directory  eg     lt img  class  img-responsive  src   dist assets images UnitBadge jpg  gt

User · Answer

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

User · Answer

In angular only one page is requested from server  that is index html  And index html and assets folder are on same directory  while putting image in any component give src value like assets image png  This will work fine because browser will make request to server for that image and webpack will be able serve that image

User · Answer

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

User · Answer

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

User · Answer

Just put your images in the assets folder refer them in your html pages or ts files with that link

[html] How to serve up images in Angular2?

Examples related to html

Examples related to angular

Examples related to image

Examples related to typescript

Examples related to path