R演示文稿reveal.js：复制文件后背景图片未显示

Question

我使用rmarkdown和reveal.js框架编写了一个R演示文稿，它在很大程度上完美地工作，但是，如果我将输出文件（html文件）复制到另一个位置，所有背景图片都会消失。（如果我在同一文件夹中创建html文件的副本，则仍然有效）。使用<img>标签包含的图片仍然显示。

一个MWE看起来像这样:

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"}

kitten.jpg文件可以是任何图片。如果我使用火狐浏览器打开presentation.html，一切正常；但是，如果我将presentation.html复制到桌面并再次打开它，则所有背景图像都消失了。

有什么想法是什么原因导致了这个错误，以及如何解决它？

我的系统是：

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   

- David

Answer 1

一个解决方法似乎是使用{.slide: id="Sec1"}，然后在您的自定义CSS文件中添加背景。

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

- Martin Schmelzer

---

一个有前途的想法，不过你确定你的CSS代码没问题吗？我没有看到任何背景图片。如果我把这行改成 background-image: url("kitten.jpg");，我能看到一张图片（只是在文字后面）。 - David

忘记了 url() ;) - Martin Schmelzer

看起来好多了，但是背景图片仅在文本后面，没有覆盖其余部分。 - David

将以下两行代码添加到CSS中对我有帮助： background-size: cover; height: 100%; - mattmilten

Answer 2

问题在于当你复制 presentation.html 文件时，它会在与 presentation.html 相同的目录中查找 kitten.jpg 文件。而当我创建 Rmd 文档时，我会把所有的图片放在一个名为 figures 的文件夹中，例如 figures/kitten.jpg，当我复制 html 文件时，也会一并复制 figures 文件夹。

我相信有更好的解决方案，但这对我来说已经足够了。

- csgillespie

---

我想知道的是，选项self_contained:默认为true。即使我明确声明self_contained: true，事情也不会改变。 - David

self_contained 似乎可以与 CSS 文件和 JavaScript 文件一起使用。 - csgillespie

它也适用于包含在img标签中的图像。 - David