Obrazy i pliki statyczne

Czego się dziś nauczysz

Przygotowanie: lekcje 05 i 06 — umiesz pokazać wartość pola i przekazać ją do właściwości elementu. Przewidywany czas: 45 min z zadaniami.

Obrazki do przykładów to pliki turniej.svg, roboty.svg i druk3d.svg — dostaniesz je od nauczyciela. Możesz też zapisać pod tymi nazwami dowolne własne obrazki (.svg, .png albo .jpg — wtedy zmień rozszerzenie w adresie).

Dlaczego obrazki mają osobny folder

Pliki z folderu src przechodzą przez kompilator: TypeScript zamienia się w JavaScript, szablony w kod. Z obrazkiem nie ma czego kompilować — ma po prostu trafić do przeglądarki taki, jaki jest.

Dlatego istnieje folder public (obok src, nie w nim). Wszystko, co w nim położysz, serwer podaje bez zmian, a ng build kopiuje do gotowej aplikacji. Leży tam już favicon.ico — ikona karty przeglądarki. Ten sam mechanizm obsłuży plik PDF z regulaminem i plik JSON z danymi, który wczytamy w lekcji 36.

klub-gier/
  public/
    favicon.ico
    img/
      turniej.svg     ← tutaj (folder img utwórz sam)
      roboty.svg
      druk3d.svg
  src/
    app/

Dwie zasady dobrego obrazka

alt opisuje treść

Tekst alternatywny czyta program dla osób niewidomych, pokazuje go przeglądarka, gdy obrazek się nie wczytał, i bierze pod uwagę wyszukiwarka. „Plakat turnieju retro” niesie informację. „obrazek” nie niesie żadnej. Obrazek czysto ozdobny dostaje pusty alt="" — czytnik go wtedy pominie.

width i height rezerwują miejsce

Przeglądarka, znając wymiary, zostawia puste pole, zanim plik dotrze. Bez tego reszta strony przeskakuje w chwili wczytania obrazka. Liczby w atrybutach to piksele, bez jednostki.

Gdzie wrzucić obrazek

Utwórz folder public/img i skopiuj do niego trzy obrazki. Adres w szablonie zaczyna się od ukośnika.

import { Component } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {

}

<div class="p-3">
  <img src="/img/turniej.svg" alt="Plakat turnieju retro" width="220" height="140">
</div>

[ fioletowy plakat „Turniej retro, piątek, sala 12” — 220 × 140 ]

Klasa Demo jest pusta — obrazek ze stałym adresem nie potrzebuje żadnych danych.

Adres obrazka z pola klasy

Skoro adres to zwykły tekst, może pochodzić z klasy — a wtedy przydają się nawiasy kwadratowe z lekcji 06.

import { Component } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly plakat = '/img/roboty.svg';
    readonly opis = 'Plakat Nocy robotów';
}

<div class="card m-3" style="width: 16rem">
  <img [src]="plakat" [alt]="opis" class="card-img-top" width="240" height="150">
  <div class="card-body">
    <h5 class="card-title">Noc robotów</h5>
  </div>
</div>

┌────────────────────┐
│ [plakat robotów]   │
│ Noc robotów        │
└────────────────────┘

Obrazek jest w karcie, u góry, dzięki klasie card-img-top. Zmień wartość pola plakat na '/img/druk3d.svg' i zapisz.

Obrazek, którego nie ma

Zły adres nie zatrzymuje aplikacji i nie daje błędu w terminalu. To dlatego tak łatwo go przeoczyć.

import { Component } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly zly = '/img/nie-ma-takiego.svg';
    readonly dobry = '/img/druk3d.svg';
}

<div class="p-3">
  <p>Poprawny adres:</p>
  <img [src]="dobry" alt="Warsztat druku 3D" width="220" height="140">

  <p class="mt-3">Błędny adres — zobacz konsolę (F12):</p>
  <img [src]="zly" alt="Tego pliku nie ma" width="220" height="140">
</div>

GET http://localhost:4200/img/nie-ma-takiego.svg 404 (Not Found)

Drugi obrazek pokazuje ikonę uszkodzonego pliku i tekst z alt. W zakładce Network (z filtrem Img) ten plik jest zaznaczony na czerwono ze statusem 404.

Szerokość, wysokość i przeskakująca strona

Dwa atrybuty, o których początkujący zapominają — a różnicę widać gołym okiem przy wolnym łączu.

import { Component } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {

}

<div class="p-3">
  <p>Z podanymi wymiarami — miejsce jest zarezerwowane od początku:</p>
  <img src="/img/turniej.svg" alt="Turniej retro" width="220" height="140">
  <p class="mt-3">Bez wymiarów — tekst pod spodem podskoczy po wczytaniu:</p>
  <img src="/img/roboty.svg" alt="Noc robotów">
  <p>Ten akapit jest pod obrazkiem.</p>
</div>

1. obrazek: puste miejsce 220 × 140 od początku, potem plakat
2. obrazek: brak miejsca — po wczytaniu akapit pod nim „zjeżdża” w dół

W narzędziach przeglądarki (F12 → Network) zaznacz Disable cache, włącz Slow 4G i odśwież stronę. Pierwszy obrazek ma zarezerwowane miejsce, drugi je sobie „wywalcza” i przesuwa tekst. Na koniec przywróć No throttling.

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• Pliki statyczne leżą w public, obok src; serwer podaje je bez kompilowania.
• Adres zaczyna się od / i nie zawiera słowa public.
• Adres z pola klasy przekazujesz przez [src]; da się go też skleić z kilku części.
• Błędny adres nie zatrzymuje aplikacji — 404 widać tylko w narzędziach przeglądarki.
• alt opisuje treść obrazu; ozdobnik dostaje alt="".
• width i height rezerwują miejsce; img-fluid dopasowuje obrazek do kolumny.
• W karcie obrazek z card-img-top stoi przed card-body.

Sprawdź się: plik leży w public/img/logo.png. Jaki adres wpiszesz w src i dlaczego nie ten z folderem public?

Dokumentacja: angular.dev — struktura projektu (folder public).