Image not showing properly in blog post

[James_Curley]

I am using distill to write a blog post. The post is written in RMarkdown. You can see the code on the left and the output after knitting on the right.

You can see that the preview of the image shows up in the Markdown document - however, try as I might, it never shows up in the knitted blog post. I have tried many different images and have had success 1 time out of about 20. I am definitely directing to the correct folder on my computer - as can be seen by the preview image showing.

Is this a known issue with blog posts using distill? Are there any other solutions ?

[cderv]

I think this is because you are using relative path.The markdown syntax for image insertion will be translated to HTML with a relative link and I guess your image is not in the same place relatively to the HTML page of your post. You can have a look at the HTML source code to see the path used in the HTML to the image, and you may see why it is not found.

Can you try embedding the image using knitr::include_graphics() ? Not sure it take care of that but that worth a try.
You can also use an absolute path, but it will work locally but not when you published I think.

Usually, it is better to have images located at the same location than your Rmd post. It is the same with any supporting files you may have for a post. This will insure that those supporting files are correctly moved to the website: https://rstudio.github.io/distill/blog.html#supporting-files

I let other with Blog experience with distill to share there experience. @tom_rstudio do you have some advice on how to better handle images with distill blog post ?

Hope it helps.

[tom_rstudio]

Thanks Christophe!

Hi @James_Curley - I usually include supporting files in the same folder as my RMD, since that becomes essentially the working directory when the RMD post is knit.

I did a blogpost this past week with a lot of images, you can see the post source on GitHub. Note that since I've included the files in that post's folder, I've just had to reference the files by name (no folder/directory).

If you have static images that will be used across multiple posts for example you may want to also use the here package to make sure things play nicely with rmarkdown when moving "up" in the folder structure.

There's a nice blogpost by Malcolm Barret about using here with RMarkdown.

[James_Curley]

Thanks both - I guess I'm too used to having a separate img folder, but I will try having images at the same level as blog posts. I did not know about here but will definitely check it out - thanks for that.

Just for completeness, knitr::include_graphics() didn't help - it still wouldn't load the images, however, my hacky work around was to include the following R chunk:

`

library(grid)
img <- readPNG("../../img/langford.png")
grid.raster(img)

`
that actually worked!

[cderv]

Thanks for sharing !

It works because the relative path is processed by R at rendering time, so it can be resolved correctly and does not become an incorrect relative path from HTML.