• Szerző: Sallai András
• Copyright © 2022, Sallai András
• Szerkesztve: 2023
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

Minden médiafájlt az assets könyvtárba helyezünk:

• assets

A képek számára érdemes egy images könyvtárat készíteni:

• assets/images/

Legyen egy kep01.png nevű kép:

• assets/images/kep01.png

A komponensben készítsünk két változót:

src/app/app.component.ts

//...
export class AppComponent {
  title = 'app01';
 
  path: string = '../assets/images/kep01.png';
  alttext: string = 'A kép leírása';
 
}

A template állományban (A .html kiterjesztésű fájl):

<img [src]="path" [alt]="alttext">

vagy:

<img src="{{path}}" alt="{{alttext}}">

Mivel az angular.json fájlban be van állítva az src/assets könyvtár, ezért így is beállítható:

path: string = 'assets/images/kep01.png';

src/app/app.component.ts

//...
export class AppComponent {
  title = 'app01';
 
  path: string = 'assets/images/kep01.png';
  alttext: string = 'A kép leírása';
 
}

Az angular.json fájl részlete:

angular.json

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