CODEWITHSUNDEEP
gitmarkdownazure-devopsvisual-studio-code
Aran Mulholland
Aran Mulholland

Reputation: 23945

What is the correct address for an image in a markdown document in VSTS?

I have a README.md file in the root of my git repository hosted in Visual Studio Team Services.

When I navigate to the file in the web browser through the project portal I can see the correctly rendered markdown except for the images. I would like to add some screenshots to the README file and would like to know the correct way to reference an image stored stored in a folder at the root of the repository/doc/images/image01.png

As the README file is also stored at the root of the repository I thought it would just be a relative link. When using Visual Studio Code on my computer (OSX) I can use relative paths and the images render correctly using the image tag as so:

![Alt text](doc/images/readmeFileComparison.png?raw=true "Readme file side by side comparison")

Does the image tag have to be different in order for me to view images when viewing the README file with the browser at (example url):

https://myaccount.visualstudio.com/ProjectName/_git/repositoryName?path=%2FREADME.md&version=GBmaster&_a=contents

There is guidance from Microsoft but there must be something I am missing. When the markdown is rendered I get a missing image tag. If I open the image in a new tab I get a HTTP 500 Error and the following message:

More information about this error

The item doc/images/pullNewChangesFromMaster.png?raw=true does not exist at the specified version, or you do not have permission to access it.

I get the same error even if the addresses have or are missing a leading forward slash from the address.

 ![Alt text](doc/images/pullNewChangesFromMaster.png?raw=true "About to Pull down the new changes")

or

 ![Alt text](/doc/images/pullNewChangesFromMaster.png?raw=true "About to Pull down the new changes")

Upvotes: 6

Views: 2794

Answers (2)

saastn
saastn

Reputation: 6015

When dealing with images in markdown files, it's important to distinguish two types of possible errors: link errors and syntax errors.

1- Link Error

When the link is broken, a broken-image and the text you put in [] will be displayed in rendered file. Sample:

![not found text](link/to/the/image.png "hover text")

enter image description here

2- Syntax Error

There are cases when renderer does not accept the syntax. In that case it will display your whole text.

![not found text](link/to/the image.png "hover text")

the outcome is like this:

enter image description here

The problem with second example is that it has an space character in its URL. All spaces in address should be replaced with %20 like this:

![not found text](link/to/the%20image.png "hover text")

Upvotes: 0

VonC
VonC

Reputation: 1326666

Reading the Guidance page from Microsoft, I do not see ?raw=true mentioned anywhere.

So it is best to try your relative link without it.

![Alt text](doc/images/pullNewChangesFromMaster.png "About to Pull down the new changes")

Upvotes: 4

Related Questions