html - Markdown IMG doesn't show in Azure Repos README

Question

can't seem to get a hold on this. I'm using Markdown to make my README. When I'm using a relative address, I can see the image in my README in the editor, but when I push the code, the image link is broken inside of Azure Repos.

<p align="center">
    <img width="100" height="100" src="docs/assets/images/LicenseManagerLogo_v10071.png" alt="Logo of License Manager" />
</p>

All I can get is the ALT text inside of Azure:

Maybe there's some special address I need to put when using Azure?

Here's what the image path looks like when I view the image in its folder on Azure Repos:

This is what is in the browser URL box when viewing the image in its folder on Azure Repos (company name removed):

https://[removed].visualstudio.com/[removed]/_git/paradox?path=%2Fdocs%2Fassets%2Fimages%2FLicenseManagerLogo_v10071.png

If I right-click on that image and view, here is the address in the browser (company name removed): https://[removed].visualstudio.com/02450a3a-db08-42c8-ba46-bad060be67f6/_apis/git/repositories/45759807-73d7-4dc5-9cb6-efaf3f06d3ce/items?path=%2Fdocs%2Fassets%2Fimages%2FLicenseManagerLogo_v10071.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=_gg_Backlog7231&resolveLfs=true&%24format=octetStream&api-version=5.0

It doesn't make much sense to me that I can see the image in the editor but not the repo. Did Microsoft really make it to where images won't load in the README?

Thanks for the help!

question from:https://stackoverflow.com/questions/65912733/markdown-img-doesnt-show-in-azure-repos-readme

Answer 1

I ran into a similar issue while publishing my Wiki. After playing around with file paths a bit, I could get it to work using the images' relative paths to that of the Wiki.

For example, if your repo's folder structure is:

src
└── Repos
    └── XYZ
        └── README.md
        └── .attachments
            └── A.png
            └── B.png
            └── C.png

Your markdown can then reference these images as:

![Image alt text](/.attachments/A.png)
![Image alt text](/.attachments/B.png)
![Image alt text](/.attachments/C.png)