Minden médiafájlt az assets könyvtárba helyezünk:
A képek számára érdemes egy images könyvtárat készíteni:
Legyen egy kep01.png nevű kép:
A komponensben készítsünk két változót:
//... 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';
//... 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:
"assets": [ "src/favicon.ico", "src/assets" ],