<img>: element Imatge Incrustada
Sumari
L'element HTML <img>
representa una imatge en el document.
Els navegadors no sempre mostren la imatge referenciada per l'element. Aquest és el cas dels navegadors no gràfics (inclosos els utilitzats per les persones amb problemes de visió), o si l'usuari opta per no mostrar imatges, o si el navegador no pot mostrar la imatge, ja que no és vàlid o un tipus no suportat. En aquests casos, el navegador pot reemplaçar la imatge amb el text definit en l'atribut alt
d'aquest element. Ha de, per aquestes i altres raons, proporcionar un valor útil sempre que sigui possible.
Categories de contingut | Contingut dinàmic, phrasing content, contingut incrustat, contingut palpable. Si l'element té un atribut usemap , o sinó que també és una part de la categoria de contingut interactiu. |
---|---|
Contingut permès | Cap, és un empty element. |
Omissió de l'etiqueta | Ha de tenir una etiqueta d'inici i no una etiqueta de tancament. |
Elements pares permesos | Qualsevol element que accepti contingut incrustat. |
Interfície DOM | HTMLImageElement (en-US) |
Atributs
Aquest element inclou els atribust globals.
align
Deprecated since HTML4.01 (en-US), Obsolete since HTML5 (en-US)- L'alineació de la imatge respecte al seu context circumdant. En HTML5, utilitzeu les propietats CSS
float
(en-US) i/overtical-align
(en-US) en el seu lloc. alt
- Aquest atribut defineix el text alternatiu que descriu la imatge. Els usuaris veuran aquest text apareixer si l'URL de la imatge està malament, o la imatge no es troba en un dels formats compatibles, o si la imatge no es descarrega.
L'omissió d'aquest atribut en conjunt indica que la imatge és una part clau del contingut, i no té un equivalent textual disponible. En establir aquest atribut en una cadena buida (
alt=""
) indica que aquesta imatge no és una part clau del contingut, i que els navegadors no visuals poden ometre la seva representació. border
Deprecated since HTML4.01 (en-US), Obsolete since HTML5 (en-US)- L'ample d'una vora al voltant de la imatge. En HTML5, utilitzeu en el seu lloc la propietat CSS
border
(en-US). crossorigin
HTML5 (en-US)- Aquest atribut enumerat indica si l'obtenció de la imatge relacionada ha de fer-se utilitzant CORS o no. En CORS habilitat, les imatges poden ser reutilitzades amb l'element
<canvas>
sense ser "corrompudes". Els valors permesos són: -
anonymous
- Una sol·licitud d'origen creuat (és a dir, amb
origen:
capçalera HTTP) es porta a terme. Però no s'envian credencials (és a dir, no hi ha cap galeta, no hi ha cap certificat X.509, i no s'envia l'autenticació bàsica HTTP ). Si el servidor no dóna credencials al lloc d'origen (si no s'estableix l'Access-Control-Allow-Origin:
capçalera HTTP ), la imatge serà contaminada i el seu ús restringit. use-credentials
- Una sol·licitud d'origen creuat (és a dir, amb
Origin:
capçalera HTTP) realitzat amb credencial és enviat (és a dir, una galeta, un certificat i l'autenticació bàsica HTTP es realitza). Si el servidor no dóna credencials al lloc d'origen (a través d'Access-Control-Allow-Credentials
: capçalera HTTP), la imatge serà contaminada i el seu ús restringit.
Origin:
capçalera HTTP), evitant el seu ús no contamina elements<canvas>
. Si no és vàlid, es tractada com si s'utilitzés la paraula clau enumerada anonymous. Veure configuració atributs CORS per obtenir informació addicional. height
- L'alçada intrínseca de la imatge en píxels. En HTML 4 (en-US), l'alçada es podria definir en píxels o com a percentatge. En HTML5 (en-US), però, el valor ha d'estar en píxels.
hspace
Deprecated since HTML4.01 (en-US), Obsolete since HTML5 (en-US)- El nombre de píxels d'espai en blanc per inserir a l'esquerra i dreta de la imatge. En HTML5, utilitzeu en al seu lloc la propietat CSS
margin
. ismap
- Aquest atribut booleà indica que la imatge és part d'un mapa del costat del servidor. Si és així, les coordenades exactes d'un clic son enviades al servidor.
longdesc
- Un enllaç a una descripció més detallada de la imatge. Els valors possibles són un URL o un element id.
name
Deprecated since HTML4.01 (en-US), Obsolete since HTML5 (en-US)- Un nom per l'element. És suportat en HTML 4 (en-US) només per compatibilitat amb versions anteriors. Utilitzeu en el seu lloc l'atribut
id
. referrerpolicy
- Una cadena que indica la referència a utilitzar per recuperar el recurs:
no-referrer:
la capçaleraReferer
no s'enviarà .no-referrer-when-downgrade:
Cap encapçalatReferer
s'enviarà quan es navega a un origen sense TLS (HTTPS). Es tracta d'un comportament per defecte de l'agent d'usuari si no hi ha una política que especifiqui lo contrari.origin:
L'encapçalatReferer
inclourà la pàgina de l'esquema d'origen, el host i el port.origin-when-cross-origin:
navegant a altres orígens es limitarà les dades de referència incloses en l'esquema, el host i el port, mentre que la navegació des del mateix origen inclourà la ruta completa de las referèncias.unsafe-url:
ElReferal header
inclourà l'origen i la ruta d'accés, però no el fragment, contrasenya o nom d'usuari. Aquest cas no és segur, ja que pot filtrar-se orígens i trajectòries dels recursos protegits-TLS a orígens insegurs.
sizes
HTML5 (en-US)- Una llista d'una o més cadenes separades per comes que indiquen un conjunt de mides de fonts. Cada mida de font es compon de:
- una condició de mitjans. Això ha de ser omès per a l'últim element.
- un valor de mida de font.
Els valors de mida de la Font especifiquen la mida de la pantalla desitjada de la imatge. Els agents d'usuari utilitzen la mida de la font actual per seleccionar una de les fonts subministrades per l'atribut
srcset
, quan aquestes fonts es descriuen utilitzant descriptors de l'amplada ('w
'). La mida de la font seleccionada afecta la mida de la imatge (mida de visualització de la imatge si no s'aplica un estil CSS). Si l'atribut srcset està absent, o no conté valors amb un descriptor d'amplada (w
), llavors l'atributsizes
no té cap efecte. src
- L'URL de la imatge. Aquest atribut és obligatori per a l'element
<img>
. En els navegadors amb suportsrcset
,src
és tractat com un candidat de la imatge amb un descriptor de densitat de píxel 1 x llevat que una imatge amb aquest descriptor de densitat de píxels ja estigui definit ensrcset
o a meys quesrcset
contingui descriptors 'w
'. srcset
HTML5 (en-US)- Una llista d'una o més cadenes separades per comes que indiquen un conjunt de fonts d'imatge possibles per a l'agent d'usuari per al seu ús. Cada cadena es compon de:
- un URL a una imatge, ,
- opcionalment, espai en blanc seguit per un:
- un descriptor d'amplada, o un enter positiu seguit directament per '
w
'. El descriptor d'amplada es divideix per la mida de la font donada en l'atributsizes
per calcular la densitat de píxels efectius. - un descriptor de densitat de píxels, que és un nombre de coma flotant positiva seguit directament per '
x
'.
- un descriptor d'amplada, o un enter positiu seguit directament per '
Si no s'especifica un descriptor, la font s'assigna el descriptor per defecte: 1x.
No és correcte barrejar descriptors d'amplada i descriptors de densitat de píxels en el mateix atribut
srcset
. Descriptors duplicats (per exemple, dues fonts en la mateixasrcset
que estan tots dos descrits amb '2x') tampoc no són vàlids.L'agent d'usuari selecciona una de les fonts disponibles a la seva discreció. Això els proporciona un marge significatiu per adaptar la seva selecció en funció de coses com les preferències de l'usuari o les condicions d'ample de banda.
width
- L'amplada intrínseca de la imatge en píxels. En HTML 4 (en-US), un percentatge o píxels són valors acceptables. En HTML5 (en-US), però, només els píxels són acceptables.
usemap
- L'adreça URL parcial (que comença amb '#') d'un mapa d'imatge associada amb l'element.
vspace
Deprecated since HTML4.01 (en-US), Obsolete since HTML5 (en-US)- El nombre de píxels d'espai en blanc per inserir dalt i sota de la imatge. En HTML5, utilitzeu en el seu lloc la propietat CSS
margin
..
Formats d'imatge suportats
L'estàndard d'HTML no dóna una llista de formats d'imatge que ha de ser admès, així que cada agent d'usuari dóna suport a un conjunt diferent de formats. Gecko és compatible am:
Interacció amb CSS
Pel que fa a CSS, <img>
és un element reemplaçat. No té cap base, de manera que quan les imatges s'utilitzen en un context de format en línia amb vertical-align
(en-US): baseline
, es col·loca la part inferior de la imatge en la base del contenidor.
Depenent del seu tipus, una imatge pot tenir una amplada i alçada intrínseca. Per alguns tipus d'imatge, però, dimensions intrínseques no són necessaries. Les imatges SVG, per exemple, no tenen dimensions intrínseques.
Errors
Si es produeix un error en intentar carregar o processar una imatge, i un controlador d'esdeveniments onerror
ha estat configurat per controlar l'esdeveniment error (en-US)
, aquest controlador d'esdeveniment serà cridat. Això pot ocórrer en diverses situacions, incloent:
- El atribut
src
està buit o ésnull
. - La URL especificada en
src
és la mateixa que la URL de la pàgina que l'usuari es troba actualment. - La imatge especificada està danyada d'alguna manera que evita que sigui carregada.
- Les metadades de la imatge especificada està danyada de tal manera que és impossible recuperar les seves dimensions, i aquestes dimensions no van ser especificades en els atributs de l'element
<img>
. - La imatge especificada està en un format no suportat pel user agent.
Exemple 1: Text alternatiu
<img src="mdn-logo-sm.png" alt="MDN">
Exemple 2: Enllaç d'imatge
Exemple 3: Ús de l'atribut srcset
L'atribut src
és un candidat 1x en agents d'usuari que suporten srcset
.
<img src="mdn-logo-sm.png"
alt="MDN"
srcset="mdn-logo-HD.png 2x">
Exemple 4: Ús dels atributs srcset
i sizes
S'ignora l'atribut src
en agents d'usuari que donen suport a srcset
utilitzant descriptors 'w
'. Quan les (min-width
: 600px) condicions del suport coincideixen, la imatge serà 200px d'amplada, en cas contrari serà 50vw d'amplada (50% de l'amplada de la finestra gràfica).
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
Especificacions
Especificació | Estat | Comentari |
---|---|---|
Referrer Policy The definition of 'referrer attribute' in that specification. |
Candidate Recommendation | Afegeix l'atribut referrerpolicy . |
HTML Living Standard The definition of '<img>' in that specification. |
Living Standard | |
HTML5 The definition of '<img>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<img>' in that specification. |
Recommendation |
Navegadors compatibles
Característica | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Suport bàsic | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
srcset |
34.0 | (Yes) | 32.0 (32.0)[2] | No support | 21 | 7.1 |
referrerpolicy |
46.0[1] | ? | 50.0 (50.0) | ? | ? | ? |
onerror event handler |
(Yes) | ? | 51 (51) | ? | (Yes) | (Yes) |
Característica | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Suport bàsic | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
srcset |
? | 34.0 | No support | No support | 21 | iOS 8 | 34.0 |
referrerpolicy |
? | 46.0 [1] | 50.0 (50.0) | ? | ? | ? | 46.0[1] |
onerror event handler |
? | (Yes) | 51.0 (51) | ? | ? | (Yes) | (Yes) |
[1] Implementad com referrerpolicy
i darrere d'una bandera. .
[2] Implementat darrere d'una preferència.