CODEWITHSUNDEEP
rknitrr-markdownreveal.js
David
David

Reputation: 10152

R Presentation reveal.js: background image not shown after copying file

I have authored an R-presentation using rmarkdown and the reveal.js-framework which works perfectly to a large degree, however, if I copy the output-file (the html-file) to another location, all background images are gone. (If I create a copy of the html-file in the same folder it still works). Pictures included using the <img>-tag are still shown.

An MWE looks like this:

presentation.rmd:

---
title: "A Test"
author: "tester"
date: "Today"
output:
  revealjs::revealjs_presentation:
    transition: slide
    theme: night
    highlight: espresso
    center: true
    self_contained: true
    reveal_options:
      slideNumber: true
      previewLinks: true
---

# <font color="black">Outline</font> {data-background="kitten.jpg"}

The kitten.jpg-file obviously can be any picture. If I open presentation.html (using firefox) everything works, if I copy presentation.html to the desktop and open it again, all background images are gone.

Any ideas on what is causing the error and how to solve it?

My system is: 

sessionInfo()

R version 3.2.3 (2015-12-10)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 16.04.1 LTS

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C               LC_TIME=de_DE.UTF-8        LC_COLLATE=en_US.UTF-8    
 [5] LC_MONETARY=de_DE.UTF-8    LC_MESSAGES=en_US.UTF-8    LC_PAPER=de_DE.UTF-8       LC_NAME=C                 
 [9] LC_ADDRESS=C               LC_TELEPHONE=C             LC_MEASUREMENT=de_DE.UTF-8 LC_IDENTIFICATION=C       

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

other attached packages:
[1] rmarkdown_1.0 revealjs_0.7 

loaded via a namespace (and not attached):
[1] magrittr_1.5    htmltools_0.3.5 tools_3.2.3     Rcpp_0.12.7     stringi_1.1.1   stringr_1.1.0  
[7] digest_0.6.10   evaluate_0.9

Upvotes: 3

Views: 1334

Answers (2)

Martin Schmelzer
Martin Schmelzer

Reputation: 23889

A work-around seems to be to use {.slide: id="Sec1"} instead and then adding the background in your custom CSS file

#Sec1 {
  background-image: url(kitten.jpg);
}

Upvotes: 2

csgillespie
csgillespie

Reputation: 60462

The issue is that when you copy presentation.html it is looking for kitten.jpg in the same directory are presentation.html. When I create Rmd documents, I put all my figures in a figures directory, e.g. figures/kitten.jpg and when I copy the html file, I also copy the figures directory as well.

I'm sure there is a better solution, but this works for me.

Upvotes: 1

Related Questions