TL;DR

The <img> tag has a required attribute called src. What goes into this required attribute?

src expects either a reference to an image or an embedded image (with Data URLs).

Was that helpful? Let’s dig deeper and start with the least popular option Data URLs.

Data URLs

“Data URLs allow content creators to embed small files inline in documents.” MDN.

It’s like embedding a file in the URL. The file is “inside” the URL; therefore, the browser can render it directly without making any additional requests.

For example:...

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEA...rPMCkP0QO4pDR//2Q==

The source of this image is here.

Inside an image tag, it looks like this:

<img alt=”cat” src=”data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEA...rPMCkP0QO4pDR//2Q==”></img>

Let's render it here:

Paths

URLs or Absolute Paths

“Uniform Resource Locator (URL) is a text string that specifies where a resource (such as a web page, image, or video) can be found on the Internet.” MDN

This is probably the most common way to set the src of an <img>. Most applications host the images in specialized cloud storage like Cloudinary and use the URL.

Example:

<img alt=”Fry from futurama” src=”https://static.wikia.nocookie.net/enfuturama/images/4/4c/Character_Fry.png”></img>

To test it, copy the path https://static.wikia.nocookie.net/enfuturama/images/4/4c/Character_Fry.pngdirectly into the browser's address bar, and you should see the image.

Relative Paths

A relative path is a shortcut for a URL in the same domain as the website. If we are in  https://www.gimtec.io, the relative path “/articles/async-meetings/” points to https://www.gimtec.io/articles/async-meetings/

You can try this right now.

1. Open the console (right-click + Inspect)
2. Go to the elements tab
3. Select the logo, like in the gif.
4. Change the value to a relative path.

The logo is an image tag with the following src https://www.gimtec.io/content/images/2021/08/gimtec-logo-2.png, which is an absolute path of the same domain gimtec.io.

Now, try changing the value to “/content/images/2021/08/gimtec-logo-2.png”.

The logo is still there on the page. This is because the browser understands the relative path as a URL to the same domain.

Relative paths are also valid inside a src attribute of an <img>.

Special Mention

What happens in our frontend code when we import an image as a module and add it to the src attribute? For example, in the create-react-app’s sample app, there is the following:

import logo from "./logo.svg";
//...
<img src={logo} className="App-logo" alt="logo" />

What is logo from src={logo}? If we take a look at the page in the browser, we’ll see something like the following:

<img src="/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg" class="App-logo" alt="logo">

Therefore, the src={logo} got translated into a relative path. This “magic” is done by a plugin, which in the create-react-app project is file-loader.

“The file-loader resolves import/require() of a file into a URL and emits the file into the output directory.” file-loader.

Conclusion

We learned that three types of URLs could go inside the `src` attribute:

• URLs or absolute paths.
• Relative paths.
• Data URLs.

The TL;DR should be clearer now:

src expects either a reference to an image or an embedded image (with Data URLs).

If you like this post, consider sharing it with your friends on twitter or forwarding this email to them 🙈

Don't hesitate to reach out to me if you have any questions or see an error. I highly appreciate it.

And thanks to Michal and Sebastià for reviewing this article 🙏