CODEWITHSUNDEEP
githubmarkdown
Rafael Borja
Rafael Borja

Reputation: 4927

Add image with link in Github's README.md?

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 How to 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>

Upvotes: 68

Views: 52520

Answers (4)

codelone
codelone

Reputation: 762

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)

Upvotes: 8

heniczyna
heniczyna

Reputation: 327

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/)

Upvotes: 10

VonC
VonC

Reputation: 1329692

Try simply the syntax:

  • 2020: [![name](link to image on GH)](link to your URL)
  • 2023: [<img src="path/to/image.png">](https://link-to-your-URL/),
    see my README as an example, from commit a932f85.
    Syntax from DaCuteRaccoon's answer.

That will wrap the image as a link

Upvotes: 117

user17585064
user17585064

Reputation:

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.

Upvotes: 7

Related Questions