[[oktatas:web:angular|< Angular]]

====== Angular képek ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Képek helye =====

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/

===== Használat =====

Legyen egy ''kep01.png'' nevű kép:
  * assets/images/kep01.png

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

<code javascript src/app/app.component.ts>
//...
export class AppComponent {
  title = 'app01';

  path: string = '../assets/images/kep01.png';
  alttext: string = 'A kép leírása';

}
</code>

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

<code html5>
<img [src]="path" [alt]="alttext">
</code>

vagy:
<code html5>
<img src="{{path}}" alt="{{alttext}}">
</code>

===== Hivatkozás másként =====

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


<code javascript>
path: string = 'assets/images/kep01.png';
</code>


<code javascript src/app/app.component.ts>
//...
export class AppComponent {
  title = 'app01';

  path: string = 'assets/images/kep01.png';
  alttext: string = 'A kép leírása';

}
</code>



Az ''angular.json'' fájl részlete:

<code javascript angular.json>
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
</code>