如何将 css 样式元素添加到 Rmd 闪亮的 renderImage？答案

【问题标题】：How do I add css style element to Rmd shiny renderImage?如何将 css 样式元素添加到 Rmd 闪亮的 renderImage？
【发布时间】：2020-02-21 03:51:21
【问题描述】：

我正在努力将 css 样式元素添加到我闪亮的 renderImage 代码中。我已经尝试了通过 tag$link 使用 css 源文件以及通过 tag$style 使用直接 css 代码的各种选项。

我已经尝试了 tag$link 和 tag$style 选项（在我的示例代码中） (1)renderImage代码之外 (2) 在 renderImage 代码中，在列表包装器之外 (3) 在 renderImage 代码里面，在列表包装里面

我收到以下两个错误之一：错误 1：“闭包”类型的对象不是子集错误 2：找不到对象“centerImage”

在我的本地机器上使用我的 logo5.png 图像，无需额外的 css - 它可以工作。在我的本地机器上使用我的 logo5.png 图像，以及额外的 css - 它不起作用。

请注意，我在 renderImage 之前将“1”、dir() 和“2”留在了代码中以跟踪执行情况。

有人可以帮忙吗？

（要在 Rstudio 中运行，请将 rrr`` 更改为 4 个位置的 3 个反引号）

（我的在线图片网址是http://www.richpat.com/wp-content/uploads/2019/04/logov5.png）

---
title: 'Shiny Dev with Logo'
output: 
  flexdashboard::flex_dashboard:
    theme: united
  orientation: columns
source_code: embed
runtime: shiny
---

rrr``{r setup, include=FALSE}        #CORRECT THIS WHEN RUNNING
knitr::opts_chunk$set(echo = FALSE, warning = FALSE, message = FALSE)
library(flexdashboard,quietly=TRUE, verbose=FALSE)
library(shiny,quietly=TRUE, verbose=FALSE)
library(plotly,quietly=TRUE, verbose=FALSE)
rrr``                                #CORRECT THIS WHEN RUNNING

Corporate
=======================================================================

Column
-----------------------------------------------------------------------

### Logo

rrr``{r}                              #CORRECT THIS WHEN RUNNING
(1)
dir()
#tag$head(tags$link(rel = "stylesheet", type = "text/css", href = "BRstyle.css"))
#tag$head(tag$style("centerImage {text-align:center;}"))

(2)
renderImage({
      rfilename=normalizePath("logov5.png")
      list(src=rfilename, contentType = "image/png", alt = "logo5", class=centerImage)
      }, deleteFile = FALSE)
rrr``                                 #CORRECT THIS WHEN RUNNING

Background
=======================================================================

Column
-----------------------------------------------------------------------

### Purpose

ad valorem libram

【问题讨论】：

标签： css r shiny markdown flexdashboard

【解决方案1】：

好的 - 所以我找到了答案。简单就是路线...

我没有在闪亮的renderImage中这样做，而是学到了很多关于闪亮和flexdashboard以及markdown如何协同工作的知识！！！

我使用 img html 标签作为带有直接显示标签的降价部分的一部分

<img src="http://www.richpat.com/wp-content/uploads/2019/04/logov5.png"
 alt="Markdown Monster icon"
 style="ftext-align:center; display: center;" />

并且我删除了完整的闪亮 renderImage r-code 部分

作为奖励 - 只是为了展示我学到的更多内容，这是我修改后的 yaml

title: 'Br F A'
output: 
  flexdashboard::flex_dashboard:
    logo: logov5s.png
    theme: readable
    css: BRstyle.css
    navbar: 
    - { title: "About", href: "http://www.richpat.com", align: left }
    source_code: embed
    orientation: columns
runtime: shiny

【讨论】：