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

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

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

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

A korábban az ''assets'' könyvtár volt a helyük.

  * assets

Újabban a **public** könyvtár az alapértelmezés.


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

Legyen egy ''kep01.png'' nevű kép:
  * public/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 = '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>

===== Hol van beállítva? =====

<code txt>
app01/
  |-angular.json
</code>

<code javascript>
"assets": [
    {
        "glob": "**/*",
        "input": "public"
    }
],
</code>