How can I display (link to/hyperlink) images that are in an Azure DevOps Git repo in a README markdown file in the same repo?

Question

Our team would like to include images in some of our markdown file documentation in our Git repos. We would also like to store the images in a Git repo and treat them as source. Because they are binaries, we may store them in a separate Git repo. However, we would prefer to keep the images in source and not have to put them in another store of some kind (i.e. something other than a repo).

In the markdown, we would like to be able to link to the images such that they display in the Azure DevOps preview (as if they were a regular HTML pages).

Is there a format for links that can be used in markdown files in Azure DevOps that will cause our images to display?

We tried simply placing an 'img' tag in the markdown and pointing it at the URI to the file in the Azure DevOps Git repo. This does not work.

<img src="https://anyaccount.visualstudio.com/repos/_git/ourRepo?path=%2FSrc%2FDocumentation%2FImages%2FImage.PNG&version=GBmaster" alt="drawing" style="width:541px" />

We would like to be able to use a full URI (i.e. not a relative link) to the image so that it not only displays in the Azure DevOps 'Preview' view but that allows us to convert our markdown files to other formats (e.g. HTML, MediaWiki) that will also display the images correctly.

Answer 1

Try using the Git Items API. I was able to direct link to a repo item this way using a URL like:

https://{organization}.visualstudio.com/{project}/_apis/git/repositories/{repo}/Items?path=path=%2Ftip.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=master&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1

Example:

An image stored in the repo:

Then in the README.md reference it using the API:

<img src="https://{organization}.visualstudio.com/{project}/_apis/git/repositories/{repo}/Items?path=%2Ftip.png&version%5D=master&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1"/>

Then it is displayed on the README:

Answer 2

All the above are great answers. I am just posting here coz I spent the last couple of hours banging my head on this and then figured out that it was an issue with the type of the image

# folder location

├── README.md
├── .attachments
│   ├── overview.drawio.svg

# contents of ReadMe.md

![architecture overview](.attachments/overview.drawio.svg)

I use the drawio vscode plugin that allows me to keep my images updatable and in the same repo. I was referencing ^^ overview.svg as

as of 06/2022. Azure Repos Markdown does not support displaying .svg images.

Converting the same to .png worked for me

# folder location
├── README.md
├── .attachments
│   ├── overview.drawio.png

# contents of ReadMe.md

![architecture overview](.attachments/overview.drawio.png)