Atrybut src HTML <img>

Tag HTML <img>

Definicja i użycie

Wymagane src Atrybut określa URL obrazu.

Istnieją dwa sposoby określenia URL obrazu w atrybutach: src Wskazówka dotycząca URL w atrybutach:

1. Absolutne adresy URL - Link do obrazu przechowywanego na innej stronie. Na przykład:

src="https://www.codew3c.com/images/img_girl.jpg"

Uwaga:Zewnętrzne obrazy mogą być chronione przez prawa autorskie. Jeśli nie masz pozwolenia na ich użycie, możesz naruszyć prawo autorskie. Ponadto, nie masz kontroli nad zewnętrznymi obrazami; mogą one nagle zostać usunięte lub zmienione.

2. Względne adresy URL - Link do obrazu przechowywanego na stronie wewnętrznej.

W tym przypadku URL nie zawiera domeny. Jeśli URL nie zaczyna się od kreski, będzie względny do bieżącej strony. Na przykład:

src="img_girl.jpg".

Jeśli URL zaczyna się od kreski, będzie względny do domeny. Na przykład:

src="/images/img_girl.jpg".

Wskazówka:Może lepiej używać względnych adresów URL. Jeśli zmienisz domenę, nie będzie przerwania łączy.

Uwaga:Jeśli przeglądarka nie znajdzie obrazu, wyświetli ikonę uszkodzonego linku i tekst alt.

Wskazówka:Aby uporządkować przechowywanie dokumentów, twórcy często umieszczają pliki graficzne w oddzielnym folderze i zazwyczaj nazywają te katalogi "pics" lub "images". W online kursach CodeW3C.com, nasi inżynierowie umieszczają większość常用的图像 w folderze o nazwie "i", co jest skrótem od "images", co pozwala na maksymalne uproszczenie ścieżki.

Przykład

W poniższym przykładzie, wstawiamy na stronie obraz tulipanów sfotografowany przez inżynierów z CodeW3C.com w Shanghai Flower Port, nazwa pliku obrazu to "eg_tulip.jpg", znajduje się w folderze "i" na serwerze. Oto kod źródłowy:

<img src="/i/eg_tulip.jpg" />

Efekt powyższego kodu:


Spróbuj sam

Wskazówka:Możesz to zrobić w naszym narzędzi do testów onlineSpróbuj samJeśli zmienisz nazwę pliku w przykładzie na "eg_chinarose.jpg", zobaczysz zdjęcie róży. Tak jak to:

Kod źródłowy:

<img src="/i/eg_chinarose.jpg" />

Efekt powyższego kodu:

Gramatyka

<img src="URL">

Wartość atrybutu

Wartość Opis
URL

Określa URL obrazu.

Możliwe wartości:

  • Adres URL absolutny - wskazuje na inny serwer (np. src="http://www.example.com/image.gif")
  • Adres URL relatywny - wskazuje na plik wewnątrz strony (np. src="image.gif")

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie

Tag HTML <img>