Published on

Fixing Image Rendering Issues in Azure DevOps READMEs

Authors
  • avatar
    Name
    Alexander Arana Escobedo
    Twitter

Intro

I stumbled upon a really annoying issue when I tried to add an image to my Azure DevOps README file using HTML tags. The code worked perfectly in GitHub and when previewing it in VS Code. You can see below what I wanted to do:

ado-readme-html

I copied the code from my GitHub repo and pasted it into my Azure DevOps README, but this was the result:

ado-readme-html

And this is what the code looked like:

<p align="center">
 <img width="100px" src="<FILE_PATH_TO_IMAGE_OR_URL>" align="center" alt="API Management" />
 <h2 align="center">API Management(APIM)</h2>
 <p align="center"><i>This README contains step on how to implement APIM.</i></p>
<p>

I solved this by using the code below:

<!-- To ensure the image renders correctly in your Azure DevOps README, you need to include a blank line between the opening <div> tag and the Markdown image reference: -->
<div style="text-align: center;">

![api management](<FILE_PATH_TO_IMAGE>)
 <h2 align="center">API Management(APIM)</h2>
 <p align="center"><i>This README contains step on how to implement APIM.</i></p>

</div>

Its important to have a blank line between the opening <div> tag and the Markdown image reference to ensure the image renders correctly.

After that it worked! 😀

💡 Side notes:

  • When I changed the file path to a URL for an online image instead of using a local file path, as shown in the example below, it suddenly worked. This was an interesting finding. 🤔

    <p align="center">
 <img width="100px" src="https://th.bing.com/th/id/R.39d616fd2a8efff729b831531d534849?rik=n52U8u1udqVYIQ&pid=ImgRaw&r=0" align="center" alt="API Management" />
 <h2 align="center">API Management(APIM)</h2>
 <p align="center"><i>This README contains step on how to implement APIM.</i></p>
<p>

  • Since I couldn't resize my SVG image directly, I had to convert it to PNG and adjust the size during the conversion. To achieve this, you can simply Google for a suitable tool, as long as the image you choose is not private. Be cautious when using tools you find online, but in my case, it was just a public API Management image.

I hope this guide helps you out! If you have any questions, don't hesitate to reach out.

Alexander Arana.E

Discuss on X