48

I'm trying to add a few images to the wiki in 1 of my Azure DevOps projects. When I use the absolute path as mentioned here https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#images in the article, the images are not showing up. Any help?

Samet ÖZTOPRAK
  • 3,112
  • 3
  • 32
  • 33
Srivatsa Marichi
  • 649
  • 1
  • 5
  • 8
  • I ended here trying to resolve images in devops repos / local machine README.md with the same source. Obvious when you figure it out though: Use relative paths e.g. ![AR-Architectural](./AR-architectural.png) https://stackoverflow.com/questions/15764242/is-it-possible-to-make-relative-link-to-image-in-a-markdown-file-in-a-gist – noontz Oct 05 '21 at 10:50

6 Answers6

78

The wiki pages get created in their own Git repository and the image files are also added there. You can browse the repos from within DevOps at; https://dev.azure.com/MyOrganisation/MyProject/_git/MyProject.wiki

The markdown path for the image should begin /.attachments/ and make sure if you are adding dimension you use =500x and not =500 if you exclude the height e.g.

![MyImage.png](/.attachments/MyImage-98765432-abcd-1234-abcd-a1234567890b.png =500x)
Dave Anderson
  • 11,836
  • 3
  • 58
  • 79
  • 1
    replace all %20(space) from the link by -(dash) example: ...com/MyOrganisation/My%20Project%20Name/_git/My-Project-Name.wiki – Cleber Machado Jul 21 '20 at 14:10
  • Trying to mass export Confluence spaces here, discovered that you also CAN'T nest images in e.g. `/.attachments/sub1/image.jpg`, it has to be flat in that top, e.g. `/.attachments/image.jpg`. I wonder why this is so restrictive? – Charl Botha Aug 02 '21 at 13:50
  • Thanks! I was looking for image resizing. – v-andrew Nov 26 '21 at 14:11
  • If you paste the image, it won't show until you click save. – OctaviaLo May 02 '23 at 07:35
21

Add image from local machine: In the wiki page editor, click 'Insert a file' icon and select image from your local pc, you will see mark-up something like: ![image.jpg](/.attachment/image-devOpsfileIdentifyer-withMixedAlphabetsAndDigits.jpg)

This will also displays preview in the editor.

Maxim Mazurok
  • 3,856
  • 2
  • 22
  • 37
user1805900
  • 347
  • 2
  • 5
11

Actually, you can now use the "Insert a file" button (represented by a paperclip icon) when editing a wiki page to upload an image.

When you upload an image this way, the image is automatically stored in the "/.attachments/" folder

Grant094
  • 111
  • 1
  • 2
  • 1
    This is very similar to [an existing answer](https://stackoverflow.com/a/58343475/3025856) from last year. In the future, please review existing answers and upvote ones that are useful before contributing a new answer. If an existing answer is mostly right, but includes a minor error, you can even edit it to suggest a correction. – Jeremy Caney May 09 '20 at 02:37
9

For my side I just copy the image in the clipboard and after that on paste it generate automatically the markdown code

TLDR

CTRL+C and CTRL+V

Laurent
  • 662
  • 2
  • 10
  • 13
4

When inserting a file in a Wiki, you initially get an image-url like blob:https://dev.azure.com/SOME-GUID. This url (when including the blob:-prefix, can be used to display the attached image in an img-tag.

<img src="blob:https://dev.azure.com/SOME-GUID" />

Centered image in Azure DevOps Wiki

If the image is important enough to be inside a Wiki page, it's probably important enough to host it somewhere you can use it inside your wiki. Have a look at creating a public container/blob in an Azure Storage account.

EDIT:
For your specific image: right-click the image and select Copy image address. You'll get an URL like this that you can use as the src of the img-tag.

https://dev.azure.com/rubdevopson/c53ed56f-c130-470b-a6ae-3c4a93266530/_apis/git/repositories/88df06c2-f627-4953-9438-0f762d4cad3a/Items?path=%2FPartsUnlimited_docs%2Fhome.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

rickvdbosch
  • 14,105
  • 2
  • 40
  • 53
  • 1
    Yes that's correct, but what if I have the images under the same repo? I have a bunch of documents structured within the repo as folders. So all my images are under that folder. How do I use in that case? Here is the link to see how does the repo look like with images which I'm trying to access inside wiki page: https://dev.azure.com/rubdevopson/_git/AzureDevOps?path=%2FPartsUnlimited_docs%2Fhome.png&version=GBmaster – Srivatsa Marichi Feb 05 '19 at 05:09
  • Yes, I know that option. I was trying out to use the relative path to see how it supports or works :-) – Srivatsa Marichi Feb 07 '19 at 09:15
  • Would be nice if the GUIDs could be replaced by human-editable names – milbrandt Jul 12 '19 at 07:12
  • Definitely find another place to host the image because ADO deletes the image in less than a day, presumably because it can't see the markdown for the image. It will look right to the author for a little while since the browser caches the file. – Moby Disk Mar 29 '22 at 13:56
0

You can host external images in the Azure DevOps wiki, using the following syntax:
![Your image](https://some-location/your-image.jpg)

The image will need to be hosted via https, http will not work.

Reference:
https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#images

Ralph Willgoss
  • 11,750
  • 4
  • 64
  • 67