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:
.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?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:
The md file generated:
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.