R Presentationreveal.js：复制文件后不显示背景图像答案

【问题标题】：R Presentation reveal.js: background image not shown after copying fileR Presentationreveal.js：复制文件后不显示背景图像
【发布时间】：2016-09-18 22:03:27
【问题描述】：

我使用 rmarkdown 和reveal.js-framework 创作了一个R-presentation，它在很大程度上可以完美运行，但是，如果我将输出文件（html 文件）复制到另一个位置，所有背景图像都是走了。（如果我在同一个文件夹中创建 html 文件的副本，它仍然可以工作）。使用<img>-tag 包含的图片仍会显示。

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（使用firefox）一切正常，如果我将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

【问题讨论】：

标签： r knitr r-markdown reveal.js

【解决方案1】：

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

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

【讨论】：

一个很有前途的想法，但是，您确定您的 css 代码吗？我没有看到任何背景图片。如果我将行更改为background-image: url("kitten.jpg");，我会看到一张图片（虽然只是在文本后面）。
忘记url() ;)
看起来更好，但背景图像仍然只在文本后面，并没有覆盖其余部分。
将这两行添加到 css 对我有帮助：background-size: cover;height: 100%;

【解决方案2】：

问题是当您复制presentation.html 时，它在同一目录中寻找kitten.jpg 是presentation.html。当我创建 Rmd 文档时，我将所有数字都放在了 figures 目录中，例如figures/kitten.jpg，当我复制 html 文件时，我也复制了 figures 目录。

我确信有更好的解决方案，但这对我有用。

【讨论】：

我想知道的是，self_contained: 选项默认为 true。即使我明确声明self_contained: true 事情也不会改变
self_contained 似乎适用于 CSS 文件和 javascript 文件。
它也适用于img-tags 中包含的图像。