Creating Clickable Images on GitBook

Emeka Uche
2 min readAug 4, 2021

When I first started using GitBook for API documentation, I had a lot of trouble trying to implement this particular feature- Clickable images.

What I wanted was an image that could contain a hyperlink. My reason? I felt I could use a couple of linked-image widgets to liven up my documentation.

Linking an image in Markdown (Gitbook’s default code) requires a few more steps than I was used to in HTML. Markdown is a lightweight markup language for creating formatted text using a plain-text editor. And since its syntax slightly differs from HTML, I could not implement this with the usual HTML anchor tag <a href>.

After a couple of experimentations, I found a way around it.

Here’s how I created clickable images on Gitbook, in three easy steps:

1. I uploaded the images onto a free server, instead of uploading them directly to Gitbook. Check out https://imgbb.com/

2. I copied the virtual address of the image as generated by the free server (HTTPS with an image extension: .png or .jpg)

3. I then affixed the address into the Markdown code format below:

[![image-text](image-virtual-address)](linked-website-address)

So basically,

[![image-text](https://some.site/your-image.jpg)](https://some.site/your-link.html)

Copy this link and paste in your GitBook WYSIWYG Editor.
There you have it! Your image is now clickable!

PS: The Markdown code above was generated via a combination of 2 different subcodes

a. Usual Markdown code for adding links: [link-text](https://some.site/your-link.html)

b. Markdown code for adding images: ![image-text](https://some.site/your-image.jpg)

I replaced the link-text in code sample a with the markdown image code, like so:

[![image-text](https://some.site/your-image.jpg)](https://some.site/your-link.html)

--

--