Adding an image to a React component

In a React application, it is common to need to display a local image (imported into the project) or an external image (hosted on another site).

Let's see how to do this in both cases.

Displaying an external image

This is the simplest method: if you have a direct URL to an image, you just need to use an <img> tag with the src attribute:

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