使用 rmarkdown ioslides 解决不同的 CSS 行为，有和没有闪亮的运行时

Question

问题

我有一个 css 用于我的 rmarkdown ioslides 演示文稿，它在标题幻灯片的右下角添加了一个图像。

这适用于标准的 ioslides 演示文稿，但当我将 shiny 嵌入到幻灯片中时，图像不会出现。 chrome 中的开发者面板显示：

Failed to load http://127.0.0.1:6483/file23f4243251a9_files/PunishR.png resource: the server responded with a status of 404 (Not Found)

我在 github (stephlocke/rmdShinyTest) 上创建了一个 MWE 来验证这个问题。

我想让图片出现。

背景

CSS

.title-slide{
   background-color: #ffffff;
   background-image: url("PunishR.png");
   background-position: right bottom;
   background-repeat: no-repeat;
   }

rmarkdown

simple rmarkdown 示例具有以下 yaml：

---
title: "shinytest"
date: "`r Sys.Date()`"
output:
  ioslides_presentation:
    css: Look.css
---

rmarkdown + 闪亮

shiny rmarkdown 示例具有以下 yaml：

---
title: "shinytest"
date: "`r Sys.Date()`"
runtime: shiny
output:
  ioslides_presentation:
    css: Look.css
---

其他信息

关于徽标参数的类似 SO 帖子已被提出，例如https://github.com/stephlocke/rmdShinyTest/blob/master/rmdShiny.Rmd。它们表明遇到的具体问题已经解决。但是，这使用了不同的功能并且使用徽标是一个不受欢迎的解决方案。

我尝试将图像和 CSS 放在基于 Style apps with CSS 的子文件夹 (www/) 中，但收效甚微。

> sessionInfo()
R version 3.2.2 (2015-08-14)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 7 x64 (build 7601) Service Pack 1

locale:
[1] LC_COLLATE=English_United Kingdom.1252  LC_CTYPE=English_United Kingdom.1252   
[3] LC_MONETARY=English_United Kingdom.1252 LC_NUMERIC=C                           
[5] LC_TIME=English_United Kingdom.1252    

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

other attached packages:
[1] shiny_0.12.2    rmarkdown_0.8.1

loaded via a namespace (and not attached):
[1] R6_2.1.1        htmltools_0.2.6 tools_3.2.2     yaml_2.1.13     Rcpp_0.12.2    
[6] digest_0.6.8    xtable_1.8-0    httpuv_1.3.3    mime_0.4

Answer 1

首先，很好的问题格式:)

我试了一下，发现了两个不太理想但可行的解决方法：

使用图像的 base64 编码而不是图像路径
我注意到如果我也在演示文稿中的某处放置相同的图像，则图像加载正常。我非常不熟悉幻灯片的工作方式以及资源的加载方式，所以我无法告诉你为什么会这样，我想也许在渲染幻灯片时，Shiny 会通过查看它需要解析的所有 URL 并使它们可用？无论如何，即使不完全知道为什么会发生，我们也可以使用这个观察来解决问题（同样，不是完美的解决方案，但有效）。只需在幻灯片中的任意位置包含图像，然后使用 CSS 将其隐藏。所以有像 <img src = "PunishR.png" style = "display: none;" />

如果这些还不够好，可能值得尝试赏金。或者尝试阅读源代码以查看文件路径何时何地被注册以供您的应用程序使用，这样您就可以理解为什么将其放在幻灯片中可以，但在 CSS 中则不行。但这不会太有趣......

Answer 2

Rstudio 现在已在 github 的开发版本中修复了这个问题。一旦发布到 CRAN（即版本 >0.9.2），此问题将得到解决，但在此期间可以从 github.

安装

if(!require(devtools)) install.packages("devtools")
devtools::install_github("rstudio/rmarkdown")

如果开发版本不适合您，请使用@daattali 的回答。

使用 rmarkdown ioslides 解决不同的 CSS 行为，有和没有闪亮的运行时

Resolve different CSS behaviour with rmarkdown ioslides with and without the shiny runtime

css

r

r-markdown

shiny

问题

背景

CSS

rmarkdown

rmarkdown + 闪亮

其他信息