45

How to add an image that is also a link to an external page on Github's README.md?

Adding a markdown to display an image is pretty simple (answer at Add images to README.md on GitHub). Adding a link is also pretty simple (GitHub relative link in Markdown file), but it seems there's is no way to add an image that is also a link to an external site.

<a href="https://stackoverflow.com/"><img src="RELATIVE_PATH_TO_IMAGE></img></a>
Rafael Borja
  • 4,487
  • 7
  • 29
  • 33

4 Answers4

86

Try simply the syntax:

[![name](link to image on GH)](link to your URL)

That will wrap the image as a link

René K
  • 337
  • 5
  • 14
VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
7

Some additional syntax mixing html and markdown, giving you more flexibility in adjusting how image is displayed.

Assuming you have repo structure as follows (it just refers to relative link used in syntax below):

example repo structure

you can use

[<img alt="alt_text" width="40px" src="images/image.PNG" />](https://www.google.com/)
heniczyna
  • 137
  • 1
  • 4
5

Structure:

[![name](link to image on GH)](link to your URL)

Example:

![image search api](https://user-images.githubusercontent.com/110724391/184472398-c590b47c-e1f2-41f8-87e6-2a1f68e8850d.png)[(Youtube)](https://www.youtube.com/watch?v=3HIr0imLgxM)
codelone
  • 604
  • 8
  • 17
4

The people who wrote the previous answers were overcomplicating it. This works in Markdown+HTML5 and is easy to understand when looking at the source code.

The code: [<img src="img/myImage.png">](http://example.com/),

where img/myImage.png should be replaced by the relative path to your image, and http://example.com/ should be replaced by the link you want to visit when the image is clicked.

DaCuteRaccoon
  • 224
  • 2
  • 13
  • Yes, this is much easier to follow, thanks! It also helped solve an issue, where the images weren't clickable on some browsers. – pir Jun 01 '23 at 11:03