logo

Obraz HTML

Znacznik obrazu HTML służy do wyświetlania obrazu na stronie internetowej. Znacznik HTML img jest pustym znacznikiem, który zawiera tylko atrybuty, znaczniki zamykające nie są używane w elemencie obrazu HTML.

Zobaczmy przykład obrazu HTML.

str.substring w Javie
 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 
Przetestuj teraz

Wyjście:

Dzień dobry przyjaciele

Atrybuty znacznika HTML img

src i alt są ważnymi atrybutami znacznika HTML img. Wszystkie atrybuty znacznika obrazu HTML podano poniżej.

1) sr

Jest to niezbędny atrybut opisujący źródło lub ścieżkę obrazu. Instruuje przeglądarkę, gdzie ma szukać obrazu na serwerze.

Lokalizacja obrazu może znajdować się w tym samym katalogu lub na innym serwerze.

2) wszystko

Atrybut alt definiuje alternatywny tekst obrazu, jeśli nie można go wyświetlić. Wartość atrybutu alt opisuje obraz słownie. Atrybut alt jest uważany za dobry dla potencjalnych SEO.

3) szerokość

Jest to opcjonalny atrybut używany do określenia szerokości wyświetlania obrazu. Nie jest to obecnie zalecane. Powinieneś zastosować CSS zamiast atrybutu szerokości.

chmod 755

4) wysokość

To h3 wysokość obrazu. Atrybut wysokości HTML obsługuje także elementy iframe, obrazy i obiekty. Nie jest to obecnie zalecane. Powinieneś zastosować CSS zamiast atrybutu wysokości.

baza danych Java jdbc

Użycie atrybutu wysokość i szerokość z tagiem img

Wiesz już, jak wstawić obraz na swoją stronę internetową, teraz jeśli chcemy nadać pewną wysokość i szerokość wyświetlaniu obrazu zgodnie z naszymi wymaganiami, możemy to ustawić za pomocą atrybutów wysokości i szerokości obrazu.

Przykład:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 
Przetestuj teraz

Wyjście:

Obraz HTML

Uwaga: Zawsze staraj się wstawiać obraz o określonej wysokości i szerokości, w przeciwnym razie może on migotać podczas wyświetlania na stronie internetowej.


Użycie atrybutu alt

Możemy użyć atrybutu alt z etykietka. Wyświetli alternatywny tekst w przypadku, gdy obraz nie może zostać wyświetlony w przeglądarce. Poniżej znajduje się przykład atrybutu alt:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Wyjście:

wywołaj funkcję js z HTML
Obraz HTML

Jak uzyskać obraz z innego katalogu/folderu?

Aby wstawić obraz do swojej sieci, obraz ten musi znajdować się w tym samym folderze, w którym umieściłeś plik HTML. Ale jeśli w jakimś przypadku obraz jest dostępny w innym katalogu, możesz uzyskać do niego dostęp w następujący sposób:

 

W powyższym zestawieniu umieściliśmy obraz na dysku lokalnym E------>folder obrazów------>img/html-tutorial/39/html-image-2.webp.

Uwaga: Jeśli adres URL src będzie nieprawidłowy lub będzie zawierał błędy ortograficzne, Twój obraz nie zostanie wyświetlony na stronie internetowej, więc spróbuj wprowadzić poprawny adres URL.


Używać oznaczyć jako link

Możemy także połączyć obraz z inną stroną lub użyć obrazu jako łącza. Aby to zrobić, umieść tag wewnątrz etykietka.

Przykład:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 
Przetestuj teraz

Wyjście:


Obsługiwane przeglądarki

Element przeglądarka ChromeChrom czyli przeglądarkaTJ przeglądarka FirefoxFirefoksa przeglądarka operowaOpera przeglądarka safariSafari
TakTakTakTakTak