css Question posted in
Some basic documentation can be found here.

Css – Images not showing Azure Devops repository README when .md is rendered from R markdown

I have a repository for an R project in my organisation’s Azure Devops. I wanted to include an image in the README file, which I created with R markdown using github_document as the output. I referred to the image in the document as below:

![Fig. 1 - Parameters to select](./images/Knit_with_params.png)

where images is the name of a folder (also uploaded to my repository) that contains the image knit_with_params.png. Below this reference in the R markdown document, I can see the image. I can also see it in the HTML preview that RStudio generates when I knit the document. Looking at the README.md file, I see that my image reference has been converted to this (css?):

<figure>
<img src="/images/Knit_with_params.png"
alt="Fig. 1 - Parameters to select" />
<figcaption aria-hidden="true">Fig. 1 - Parameters to
select</figcaption>
</figure>

The problem is that when I push the README to my repository, it just shows me a placeholder instead of the image itself, despite the fact that when I look at the images folder in the repository, I can see that the image file is there, and if I click on it I can even see the image itself.

My colleague solved it by going into the README.md file and changing the css to (note also lack of . before the forward slash at the beginning of the relative path):

![Fig. 1 - Parameters to select](/images/Knit_with_params.png)

If I remove the . from the relative filepath in R markdown, it doesn’t like it – I get the following message:

(No image at path /images/Knit_with_params.png)

The css in the .md still looks exactly the same as before, but the HTML preview no longer shows the image and either way (with or without .) as long as there is css and not a relative file path in the rendered .md., the image is not visible on the README page in the repository.

This leads me to two questions:

  1. Why does the css in markdown not work in Azure Devops repositories?
  2. Is there a way to render the R markdown to .md but keep the relative file paths to images as is, instead of converting them to css, or do I have to go into the .md manually and change them back every time I update the readme?
Tags:

2

Answers


  1. 0

    I can reproduce the same appearance when generating the markdown file from Rmd.

    For 1st query, the css is not supported in DevOps markdown, as mentioned in the official doc, need to use below syntax for the image:

    ![Text](URL)

    eg:

    Relative path: ![Image alt text](./image.png)
Absolute path in Git: ![Image alt text](/media/markdown-guidance/image.png)

    For 2nd query, you can try to use a raw Markdown chunk to include the image, it will treat the content as raw Markdown.

    My Rmd file:

    enter image description here

    The md file generated:

    enter image description here

    The relative path with . before forward slash is working on my repo. If only absolute path works on your md file, you can remove . to get the expected image syntax.

    Login or Signup to reply.
  2. 0

    Github treats markdown documents slightly different than Devops, which might complicate migration indeed!

    However, a little change on the output configuration in your markdown document can help Devops displaying it correctly – instead of using github_document as the format, try with md_document, specifying markdown as the variant. This would ensure the interpreter renders pure markdown instead of mixing it with HTML 🙂

    Also, note that Devops uses its own way of specifying formats – so if you need your images to be of a specific dimensions you need to add that by the end of the path (e.g.: ![This plot](path/to/this/plot =500x250)) according to their documentation. This is something pure markdown doesn’t like, as it replaces that space between the path and the size specs with the encoded value for the space (%20). Devops will likely not appreciate this, but you can always add a little search and replace before pushing.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search