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?

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.

Upvotes: 7

Answers (4)

frictionlesspulley

Reputation: 12388

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)

Upvotes: 3

Biff MaGriff

Reputation: 8241

Use a relative image link.

![alt text](./image.png)

Upvotes: 1

Chris Mills

Reputation: 410

Markdown is

![logo](https://www.gravatar.com/avatar/acd9d1f54d709f2d477073a2ba585140?s=48&d=identicon&r=PG)

but does not seem to support all image types.

The image can be relative to your repository in azure devops git or bitbucket

Upvotes: 0

Matt

Reputation: 4065

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:

Upvotes: 6

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?

Answers (4)

Related Questions