Xaringan: local images not displaying

[ramiroricardo]

I was trying xaxringan for the first time, but I am having problems inserting local images into the file. I tried to look for solutions to this but did not find it.

The images display fine on the html output from a standard .Rmd file, but I get the "blue question mark" when I try to run the same code from a xaringan document. R plots run fine though, but images inserted either via knitr::include_graphics or with ![]() do not display. If anyone would have an idea on how to solve this, I would be happy to hear.

Code and session info are below (I am using RStudio 1.1.423).

Thanks for any help,

Ramiro

````

title: "Presentation Ninja"
subtitle: "test"
author: "RR"
date: "2018"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

```{r}
plot(iris$Sepal.Length,iris$Sepal.Width)

```{r}
knitr::include_graphics("plot.png")

---

````

Session Info:

R version 3.4.3 (2017-11-30)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.4

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.4/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
 [1] compiler_3.4.3   backports_1.1.2  magrittr_1.5     rprojroot_1.3-2  htmltools_0.3.6 
 [6] tools_3.4.3      xaringan_0.6.7   yaml_2.1.19      Rcpp_0.12.16     stringi_1.2.2   
[11] rmarkdown_1.9.18 knitr_1.20.3     xfun_0.1         stringr_1.3.1    digest_0.6.15   
[16] evaluate_0.10.1

[tcgriffith]

I don't see any problem in your code.

Make sure "plot.png" sits together with your rmd file.

[sagitaninta]

I also did not see any problem with his code, but I have the same problem: my image are not showing even after writing a complete path of the image.

[daaronr]

Aha - folders don't seem to work well (or our syntaxes are wrong). You must put it in the SAME folder as the rmd.

[trashbirdecology]

Alternatively, use
<img src="plotfolder/plot.png">
to load from subdir.

[XiaoyuZeng]

I have the same problem.

And I fix it by moving png file to the folder .Rmd exist, and just plot this picture with a simple path instead of a complete path

For instance, using '' instead of '

[brunaw]

Same problem here. This issue should be reopened if possible 🤔

[gadenbuie]

@brunaw can you share a reproducible example? If you're having the same issue as the one above (https://github.com/yihui/xaringan/issues/145#issuecomment-518062306), the full path approach doesn't work because of browser limitations and there's really no way around it other than to collect your files into a common folder. The best approach is to store your images and other assets in the same or a sub folder of the folder as your slides file.

[brunaw]

Hey @gadenbuie, thanks for answering. My problem got solved but I'm not sure how. I can share the details as I don't know if it would be reproducible for other people. This just started happening to me today, I was simply trying to use local images with chunks like:

{r, echo = FALSE, out.height="50%", fig.height=1, out.width="50%", fig.align='center'}
knitr::include_graphics("img/filename.jpg)

xaringan didn't give me any actual errors but didn't show the image either, just the error symbol when an image doesn't loads. When I printed a list.files() of the folder in one of the slides it gave me correct names, so I knew it could see the files. At some point, I gave up and my solution was to upload the files to GitHub and use their links in knitr::include_graphics(), because that worked. I tried running old presentations that I knew to be working but the same happened.

Now, about 1 hour after that I tested it again and the same code it's working, but I don't know what changed, I didn't reinstall the packages (I knew they were updated) or restarted the computer. I think it had something to do with my iCloud Drive. Sorry to have commented in this issue, but I was very confused (still am) with what was happening here 😐

[mkapur]

I was able to get this to work so long as the PNG was a) in the same folder as the RMD and b) I did not include a forward slash ahead of the filename, e.g.
.center[![Plot Caption](Plotname-sitting-in-same-folder.PNG)]

[lc822]

I am also only able to get the image to display if it is in the same folder as the .Rmd file - are there any new solutions to this issue?

![](image.jpg)

[mkapur]

@lc822 I am also able to get this to work if the image is in a nested directory, such that the folder containing the .Rmd has a folder called "img" (or whatever) and all figures inside of that. It doesn't solve the issue of having them completely separate, but avoids clutter.
![Plot Caption](/img/plot-in-subfolder.PNG)

[lc822]

Thanks @mkapur, that does make it less messy!

[knnchua]

In case anyone else is interested (as I ran into this problem today), this is what worked for me:

Your YAML contains a lib_diroption which by default is called libs. This is where many xaringan objects are stored.

output:
  xaringan::moon_reader:
    css: ['default', 'metropolis', 'metropolis-fonts']
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false

You may either use knitr::include_graphics() within an R code chunk to call your image:
{r, echo = FALSE, out.height="50%", fig.height=1, out.width="50%", fig.align='center'} knitr::include_graphics("libs/img/my_img.jpg")
where img (or whatever you want to call it) is a subfolder within libs.

Or you may also use the following directly: ![img_caption](libs/img/my_img.jpg)

For background images, what worked for me was background-image: url("libs/img/my_img.jpg")

Note that the folder libs should be on the same folder as your .rmd file.