Problems with embedding images in distill blog posts

[EMD]

I have a problem with images not embedding in individual blog posts on my website (built with the distill package).

• I've kept an ./images folder in my root directory where I store all images.
• In my Rmd blog post, I then reference this file path using knitr::include_graphics("../../images/2020-12-31_look-arounds.jpg"). The image is displayed if I execute the code within my RStudio environment, but it disappears if I knit the Rmd file and rebuild my website.
• I'm wondering if there is an alternate file path that is being called when I knit my Rmd file, that I should be specifying and storing individual blog post images in instead?

The Rmd file can be found here. Everything else is rendering terrifically!
My github repo can be found here.

Thanks!

[gueyenono]

Have you heard of the here package? I highly encourage you to use it in all your project as it standardizes the way your write your paths in your code.

The following blogpost explains why you should use the here package despite the fact that you already use RStudio projects (which I believe you do): https://malco.io/2018/11/05/why-should-i-use-the-here-package-when-i-m-already-using-projects/

[EMD]

I've just switched the code chunk to knitr::include_graphics(here("images/2020-12-31_look-arounds.jpg")) but the same bug persists. I do use here() in my workflow ordinarily, but I was under an assumption that it's not so great for website rendering? Thanks for the link though!

I have a feeling that it's a distill problem and my file structure is a bit messy, and maybe the Rmd that gets rendered from the _post folder into post isn't transferring my file path reference?

[gueyenono]

@cderv Would you by any chance know how to address this issue? Thanks.

[cderv]

I have look into this and here is my investigation on your issue. (BTW thanks a lot for sharing the source, it is crucial in this case to have !)

What is odd and should trigger a warning is: I don't see any "wrong loaded" images in your post result: R|Py notes: Cleaning free text and wrangling strings

When an image can't load, you should have a broken image link like this usually

If I look at the HTML code with a browser inspector, I don't find any <img> tag here. So it seems that there is nothing written to the HTML as if the results of the chunk were not included.

So I think the culprit in your case is that you used this as global chunk option

erikaduan/erikaduan.github.io/blob/98b56d34e9a2fefd712375b531329ddcef8000a7/_posts/2020-12-31-cleaning-free-text-and-wrangling-strings/wrangling-strings-and-cleaning-free-text.Rmd#L18

This means, every chunk result will be hidden !! Included the result of

```{r, echo = FALSE, fig.align = 'center', out.width = '60%'} 
knitr::include_graphics("../../images/2020-12-31_look-arounds.jpg")  
```

I think that is why you don't see any image embedded. Try changing this option globally (to avoid further error) or set the default back for this chunk.

```{r, echo = FALSE, fig.align = 'center', out.width = '60%', results = 'markup'} 
knitr::include_graphics("../../images/2020-12-31_look-arounds.jpg")  
```

Hope it helps.

[EMD]

Thanks so much for investigating my source code and sharing how you came to the conclusion.