Add images to README Git – Guidelines

In this article, we shall see how to Add images to README Git pages including readme.md or wiki pages, etc.

The below technique discussed can be used for any repository available in GitHub or Azure DevOps repository or GitLab repository etc.

Today in this article, we will cover below aspects,

Step1 – Create a Readme file

Create a Readme file in your repository.

Step2 – Add Image to Readme.md file

Add Image to Readme.md file can be done using the below pattern

Common pattern

![Text](URL)

Using Markup attribute

One can add images using![alt text] markup attribute as below,

![alt text](https://github.com/thecodebuzz/FileSizePOC/blob/master/TheCodebuzz.png?raw=true)

Using Custom Markup

You can also use any custom names Ex. ![image] or![thecodebuzz] markup tag to ad image to your documentation.

![image](https://github.com/thecodebuzz/FileSizePOC/blob/master/TheCodebuzz.png?raw=true)

How to GET image URL or Path?

The path or url to the image file can be a relative path or the absolute path in Git or TFVC

• Above we have used an image link that is easy to get from the git repository.
• Please upload the required images to the repository at any of the paths.
• Right-click on the image and copy the image link address.

That’s all, once the image link is added, you can see documentation with the required image to your documentation.

Resize the image README.md

Pattern :

IMAGE_URL = WIDTH x HEIGHT

[![name](https://github.com/thecodebuzz/FileSizePOC/blob/master/TheCodebuzz.png =400x250)](https://www.thecodebuzz.com/how-to-add-image-to-excel-files-using-npoi/)

Add an image with a link in README.md

You can also add an image with a link to Github’s README.md file.

You just need to define your markup with the source URL/Link.

[![name](https://github.com/thecodebuzz/FileSizePOC/blob/master/TheCodebuzz.png?raw=true)](https://www.thecodebuzz.com/how-to-add-image-to-excel-files-using-npoi/)

References:

• How to do Cherry Pick in Git Guidelines

Do you have any comments or ideas or any better suggestions to share?

Please sound off your comments below.

Happy Coding !!

---

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.

---