Ioslides演示中的图像不再正确转换为Base64

时间:2015-11-12 09:59:17

标签: r base64 rstudio knitr r-markdown

我有一个ioslides演示文稿,我在RStudio中创建和渲染。 上周演示文稿正确呈现,每个人都很高兴。但现在我有一个问题。我通过修改默认的css样式模板在右上角的每张幻灯片上添加了一个图像。更准确地说,我改变了后续选择器:

/* line 62, ../scss/default.scss */
slides > slide {
  display: none;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 26px;
  color: #797979;
  width: 900px;
  height: 700px;
  margin-left: -450px;
  margin-top: -350px;
  padding: 40px 60px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;

  background-image: url(Images/logodue.png) !important;
  background-size: 200px !important;
  background-repeat: no-repeat !important;
  background-position: 93.1% 4% !important;
}

我在最后添加了四个背景属性。请注意,我使用相对路径添加了背景图像,并使用了* .png文件。 然后我只在我的YAML标题中包含CSS模板:

---
title: "My Presentation"
csl: mee.csl
output:
  ioslides_presentation:
    css: dueCSS.css
    widescreen: yes
bibliography: references.bib  
---

由于某种原因,不显示此图像。我在演示文稿文件中添加的图像经过编码和显示没有问题。只是样式表中的徽标不会。当我检查输出HTML幻灯片的源代码时,样式表被正确包含,图像似乎也被编码:

slides > slide {
  display: none;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 26px;
  color: #797979;
  .......
  .......
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  background-image: data:image/png;base64,iVBORw0KGgoAAAANSUhEUg....AND SO ON

我已尝试使用Chrome和Firefox打开它,但它们都没有显示徽标。有没有人有想法?

编辑:确实显示了某些内容。但它不是标志。它看起来像这样(幻灯片右上角的屏幕截图):

enter image description here

编辑2:进一步的调查表明,样式表也被编码并包含在最终的HTML文件中,如下所示:

<link href="data:text/css;charset=utf-8,%40charset%20%22UTF%2D8%22%3B%0<!-- rest of the base64 code -->" rel="stylesheet" type="text/css" />

如果我将其更改为&#34; real&#34;样式表工作正常:

<link href="dueCSS.css" rel="stylesheet" type="text/css" />

因此我猜错误必须在编织程序中?

0 个答案:

没有答案