What can go inside an <img>'s "src"?
TL;DR src expects either a reference to an image or an embedded image (with Data URLs). Was that helpful?
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.png
directly 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.
Open the console (right-click + Inspect)
Go to the elements tab
Select the logo, like in the gif.
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 🙏