Atrybut src w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Atrybut src określa źródło zasobu, który ma zostać wczytany przez element HTML. Najczęściej występuje w elementach takich jak <img>, <script>, <iframe>, <audio> i <video>.

Dla obrazka src wskazuje plik graficzny, który ma zostać wyświetlony:

<img src='obraz1.gif' alt='Opis obrazu'>

W tym przykładzie przeglądarka pobiera i wyświetla plik obraz1.gif.

Zmiana src za pomocą JavaScript

Atrybut src można zmienić dynamicznie, np. po kliknięciu przycisku:

<img id='foto' src='obraz1.gif'>
<button onclick="document.getElementById('foto').src='obraz2.gif'">
  Zmień obraz
</button>

Po kliknięciu przycisku nie zostanie dodany drugi obraz. Zmienione zostanie źródło istniejącego elementu <img>, więc obraz1.gif zostanie zastąpiony przez obraz2.gif.

Ścieżki w atrybucie src

Wartość src może być:

  • nazwą pliku, np. obraz.gif,
  • ścieżką względną, np. grafika/obraz.png,
  • adresem URL, np. https://example.com/obraz.jpg.

Ważne na egzaminie

Jeżeli kod JavaScript przypisuje nową wartość do .src, oznacza to zmianę źródła zasobu, najczęściej zamianę wyświetlanego obrazka na inny.