Embedding your image in google colab markdown
This article is a quick guide to help you embed images in google colab markdown without mounting your google drive!
Just a quick intro to google colab
Google colab is a cloud service that offers FREE python notebook environments to developers and learners, along with FREE GPU and TPU. Users can write and execute Python code in the browser itself without any pre-configuration. It offers two types of cells: text and code. The ‘code’ cells act like code editor, coding and execution in done this block. The ‘text’ cells are used to embed textual description/explanation along with code, it is formatted using a simple markup language called ‘markdown’.
Embedding Images in markdown
If you are a regular colab user, like me, using markdown to add additional details to your code will be your habit too! While working on colab, I tried to embed images along with text in markdown, but it took me almost an hour to figure out the way to do it. So here is an easy guide that will help you.
STEP 1:
The first step is to get the image into your google drive. So upload all the images you want to embed in markdown in your google drive.
Step 2:
Google Drive gives you the option to share the image via a sharable link. Right-click your image and you will find an option to get a sharable link.
On selecting ‘Get shareable link’, Google will create and display sharable link for the particular image.
Make sure to change the ‘Restricted’ mode of sharing to ‘Anyone with the link’ and copy the like
Step 3:
The copied shareable link will be in the following format
https://drive.google.com/file/d/<ID of image>/view?usp=sharing
The format may change in the future but all we need to embed our image is the <ID of image> from URL. Once you have identified the ‘ID’ copy it.
Step 4:
Now that we have the ID we will use the following URL formate to embed the image
https://drive.google.com/uc?id=<ID of image>
Replace the <ID of image> with your copied ID. This URL will be used in your markdown to embed the image.
Step 5:
Now the last step is to actually embed image in markdown. This can be done by either of the following 2 methods
- using colab insert image feature
Click the image icon on the top of the markdown cell. This will insert the “[alt text](https://)” in markdown. Replace ‘https://’ by the URL we made above.
- using HTML <img> tag
Use the <img> HTML tag and assign the URL we made as its ‘src’ (source). The HTML <img> tag is let’s you specify the size of the image if you want.
The end result by either of the methods will be
Thank you, Hope this guide comes handy to you one day!
