Atributo src de HTML <img>

Etiqueta <img> de HTML

Definición y uso

Obligatorio src El atributo especifica la URL de la imagen.

Hay dos métodos para especificar la URL en src Especificar la URL en el atributo:

1. URL absoluta - Enlazar a imágenes externas alojadas en otros sitios web. Por ejemplo:

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

Nota:Las imágenes externas pueden estar protegidas por derechos de autor. Si no obtiene el permiso para usarlas, podría infringir la ley de derechos de autor. Además, no puede controlar las imágenes externas; podrían eliminarse o modificarse repentinamente.

2. URL relativa - Enlazar a imágenes alojadas en el sitio web.

En este caso, la URL no incluye el nombre de dominio. Si la URL no comienza con una barra oblicua, será relativa a la página actual. Por ejemplo:

src="img_girl.jpg".

Si la URL comienza con una barra oblicua, será relativa al dominio. Por ejemplo:

src="/images/img_girl.jpg".

Consejo:Es posible que sea mejor usar URLs relativas. Si cambia el nombre de dominio, no se producirán enlaces rotos.

Nota:Si el navegador no encuentra la imagen, mostrará el icono de enlace roto y el texto alt.

Consejo:Para organizar el almacenamiento de documentos, los creadores suelen almacenar los archivos de imágenes en una carpeta separada y generalmente nombran estos directorios como "pics" o "images". En los tutoriales en línea de CodeW3C.com, los ingenieros almacenan la mayoría de las imágenes en una carpeta llamada "i", que es el acrónimo de "images", lo que permite simplificar al máximo la ruta.

Ejemplo

En el siguiente ejemplo, insertamos en la página una foto de tulipanes tomada por un ingeniero de CodeW3C.com en el Parque de Flores de Shanghai, el nombre del archivo de la foto es "eg_tulip.jpg", almacenado en la carpeta "i" del servidor. Este es el código fuente:

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

El efecto del código anterior es:


Pruebe usted mismo

Consejo:Puede probar en nuestra herramienta de pruebas en líneaPruebe usted mismo，si cambia el nombre del archivo en el ejemplo a "eg_chinarose.jpg", verá una foto de una rosa china. Algo así:

Código fuente:

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

El efecto del código anterior es:

Sintaxis

<img src="URL">

Valor del atributo

Valor Descripción
URL

Se especifica la URL de la imagen.

Valores posibles:

  • URL absoluto - apunta a otro sitio (por ejemplo, src="http://www.example.com/image.gif")
  • URL relativo - apunta a un archivo dentro del sitio web (por ejemplo, src="image.gif")

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte

Etiqueta <img> de HTML