Attribut src de l'image HTML

Balise HTML <img>

Définition et utilisation

Obligatoire src Les attributs définissent l'URL de l'image.

Il y a deux méthodes pour spécifier l'URL dans src Spécifier l'URL dans les attributs :

1. URL absolue - Lien vers une image hébergée sur un autre site. Par exemple :

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

Attention :Les images externes peuvent être protégées par des droits d'auteur. Si vous n'avez pas obtenu une licence pour son utilisation, cela pourrait enfreindre la loi sur le droit d'auteur. De plus, vous ne pouvez pas contrôler l'image externe ; elle pourrait être supprimée ou modifiée soudainement.

2. URL relative - Lien vers une image hébergée sur le site.

Dans ce cas, l'URL ne comprend pas le domaine. Si l'URL ne commence pas par une barre oblique, elle est relative à la page actuelle. Par exemple :

src="img_girl.jpg".

Si l'URL commence par une barre oblique, elle est relative au domaine. Par exemple :

src="/images/img_girl.jpg".

Astuce :Il est peut-être préférable d'utiliser des URL relatives. Si vous changez de domaine, cela ne produira pas de bris de lien.

Attention :Si le navigateur ne trouve pas l'image, il affichera l'icône de lien brisé et le texte alt.

Astuce :Pour organiser le stockage des documents, les créateurs préfèrent généralement stocker les fichiers d'images dans un dossier séparé et nomment ces dossiers "pics" ou "images" ou des noms similaires. Dans les tutoriels en ligne de CodeW3C.com, les ingénieurs ont placé la plupart des images couramment utilisées dans un dossier nommé "i", "i" étant l'abréviation de "images", ce qui permet de simplifier au maximum le chemin.

Exemple

Dans l'exemple suivant, nous insérons une photo de tulipes prise par un ingénieur de CodeW3C.com dans le Parc des fleurs de Shanghai, le nom du fichier de cette photo est "eg_tulip.jpg", et il est stocké dans le dossier "i" du serveur. Voici le code source :

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

L'effet du code ci-dessus :


Essayer vous-même

Astuce :Vous pouvez essayer avec notre outil de test en ligneEssayer vous-mêmeSi vous changez le nom du fichier dans l'exemple en "eg_chinarose.jpg", vous verrez une photo de rose trémière. Voici comment :

Code source :

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

L'effet du code ci-dessus :

Syntaxe

<img src="URL">

Valeur de l'attribut

Valeur Description
URL

Définit l'URL de l'image.

Valeurs possibles :

  • URL absolue - Pointe vers un autre site (par exemple src="http://www.example.com/image.gif")
  • URL relative - Pointe vers un fichier dans le site (par exemple src="image.gif")

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Balise HTML <img>