Dans une application React, il est fréquent d’avoir besoin d’afficher une image locale (importée dans le projet) ou une image externe (hébergée sur un autre site).

Voyons comment faire dans les deux cas.

Afficher une image externe

C’est la méthode la plus simple : si vous avez une URL directe vers une image, il suffit d’utiliser une balise <img> avec l’attribut src :

export function Avatar() {
  return (
    <img
      src="https://picsum.photos/200"
      alt="Avatar aléatoire"
      className="avatar"
    />
  );
}