css - 使用和不使用 shiny 运行时，使用 rmarkdown ioslides 解决不同的 CSS 行为

Question

问题

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

这适用于标准的 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;
   }

Markdown

simple rmarkdown示例具有以下 yaml:

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

rmarkdown + Shiny

shiny rmarkdown示例具有以下 yaml:

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

其他信息

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

我尝试将图像和 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

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

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

1. 使用图像的 base64 编码而不是图像的路径

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

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