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

Question

问题

我有一个css为我的rmarkdown ioslides演示文稿，添加一个图片到右下角的标题幻灯片。

这对于标准的ioslides演示很有效，但是当我将闪亮的图像嵌入到幻灯片中时，图像就不会出现。铬中的开发人员面板显示：

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

折价

简单重排示例具有以下yaml：

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

粉刷+发亮

闪亮的羽绒示例具有以下yaml：

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

其他信息

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

我尝试将图像和CSS放在一个基于www/的子文件夹( 带有CSS的样式应用程序 )中，但没有成功。

> 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

Rstudio现在已经在github上提交他们的开发版本时解决了这个问题。一旦发布到CRAN (即版本>0.9.2)，这个问题将得到解决，但在此期间可以从github安装。

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

如果开发版本不是您的选项，请使用@daattali的答案。

Answer 2

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

我在这里玩了一会儿，我找到了两个不太理想的解决办法，但会奏效的：

1. 使用图像的base64编码而不是图像的路径
2. 我注意到，如果我也在演示文稿中放置相同的图像，那么图像就会加载得很好。我非常不熟悉幻灯片是如何工作的，以及资源是如何加载的，所以我无法告诉您为什么会发生这种情况。我想，在呈现幻灯片时，可能会忽略所有需要解析的URL，并让它们可用？无论如何，即使不完全知道为什么会发生这种情况，我们也可以使用这个观察来解决问题(同样，不是一个完美的解决方案，而是可行的)。只需将图像包含在幻灯片的任何位置，并使用CSS隐藏它。所以吃点像<img src = "PunishR.png" style = "display: none;" />这样的东西

如果这些不够好的话，也许值得一试赏金。或者试着阅读源代码，看看文件路径何时何地被注册为你的应用程序可用，这样你就可以理解为什么把它放在幻灯片中是好的，但在CSS中不行。但这不会太有趣..。