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

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

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

Why do you want to use relative path? Can't we set it to start from root (i.e. `this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg'`) — Harry Ninh, Oct 25 '16 at 03:05
Unfortunately that didn't work. How does the application know where the root is ? Is it the project root, or is it always assets for static files like css, images, and javascript ? — TJB, Oct 25 '16 at 03:21
Yea it really depends on your setup though. For me, I separate assets off the code part (by having different gulp tasks for them) so I'll know exactly where the assets are. — Harry Ninh, Oct 25 '16 at 03:26
Phwew, finally got it to work Harry. You were right about using the full path. The reason it wasn't working was an issue I've had in the past when using photoshop, and not exporting images from there correctly. Argghhh Photoshoppppp ! Anyway Thanks Harry ! — TJB, Oct 25 '16 at 04:48

score 119 · Accepted Answer · edited Apr 02 '19 at 12:53

119

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.

edited Apr 02 '19 at 12:53

Chuck

248
5
13

answered Mar 07 '17 at 23:39

Babar Hussain

2,917
1
17
14

1

Thanks for your answer, it helped me a lot. I would appreciate it if your could tell me where in the official docs is this documented? – Ziv Glazer Jun 28 '17 at 13:52
Angular projects made with angular-cli track where assets can be served from in the `.angular-cli.json` file. See @michal-ambrož answer for more information. – kevin.groat Sep 11 '17 at 16:32
1

Thx! ...when you've been playing around with Angular for months and suddenly you realize you haven't yet had to add a single image ;-) – Simon_Weaver Jan 26 '18 at 06:17
"This will only work if the base href tag is set with /" What do I need to do if my base href needs to be setup to another path because my app will run in a subdirectory on the server? – Gilles Aug 13 '19 at 17:23
It will find the assets folder in that directory so there will be no issue I think – Babar Hussain Aug 14 '19 at 08:08
helpful, thanks ! – jonathasborges1 Dec 15 '21 at 16:44

score 11 · Answer 2 · edited Sep 10 '17 at 19:34

11

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

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

edited Sep 10 '17 at 19:34

kevin.groat

1,274
12
21

answered Jul 27 '17 at 20:08

Michal Ambrož

169
1
6

3

Why if I add `"assets": [ "assets", "assets/images", "favicon.ico" ],` it still doesn't work? – bielas Nov 01 '17 at 22:22

score 4 · Answer 3 · edited Dec 14 '17 at 09:45

4

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

edited Dec 14 '17 at 09:45

atish shimpi

4,873
2
32
50

answered May 09 '17 at 06:01

Gajanan Kulkarni

697
6
22

score 2 · Answer 4 · answered Oct 19 '17 at 00:08

2

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:

 <img  class="img-responsive" src="/dist/assets/images/UnitBadge.jpg">

answered Oct 19 '17 at 00:08

davaus

1,145
13
16

But when you're in development, this wouldn't work right? – devN Dec 08 '17 at 13:39
2

@davaus probably because you already did a build so your old 'dist' is just sitting there. If you update an image it isn't going to be refreshed until you build. – Simon_Weaver Jun 02 '18 at 18:55
That makes sense. Thanks. – davaus Nov 15 '18 at 03:44

score 1 · Answer 5 · edited Dec 14 '17 at 09:45

1

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

edited Dec 14 '17 at 09:45

atish shimpi

4,873
2
32
50

answered Jun 10 '17 at 06:35

Abhishek G

19
1

score 1 · Answer 6 · answered Nov 06 '19 at 15:56

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.

score 0 · Answer 7 · answered Oct 07 '21 at 00:01

you can use like this

for the div background image

<div style="min-height: fit-content;
background-image: url('/assets/Get-started-section.jpg'); background-size: cover; background-position:center;
width: 100%; ">
</div>

And for the img

 <img src="/assets/Get-started-section.jpg"/>

How to serve up images in Angular2?

7 Answers7

Linked