在文档和嵌入式闪亮应用程序中渲染图像

Question

当我将嵌入的闪亮应用程序插入到我的文档中时，如 Embedded Shiny Apps 所示，在 YAML 中使用“运行时：闪亮”并单击“运行文档”按钮，只有图像占位符图标。

但是当我删除闪亮的应用程序并从 YAML 中删除“运行时：闪亮”时，嵌入的图像在渲染后是可见的。

以下链接包含嵌入图像的主题，但没有解决我的问题 - 在这两种情况下，图像占位符图标仍然存在。

• https://github.com/rstudio/rmarkdown/issues/504
• Embedding Image in Shiny App

问题：

• 我应该对我的代码进行哪些更改才能获取图像？
• 还是与我最初选择的编码有关？

下面是我的代码示例，其中包含一个嵌入式闪亮应用程序——因此在必要时您只需复制和粘贴即可。闪亮的应用程序只是 r 工作室画廊的副本......

编辑： 根据 timfaber 的建议，我在代码中添加了 renderImage() 部分。但是关于渲染的两个问题仍然存在。

如何抑制向上或向下滚动以查看整个图像的需要？以及如何在闪亮的应用中定位图像？

---
title: "Documentation"
author: "tueftla"
date: "23 Mai 2017"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(shiny)
```

Here is my documentation …  
and also one of the images.  


# my old version
#![](image1.png)
# 
```{r, echo=FALSE}
    # Here you have to scroll up or down to see the entire image
    shinyApp(

         ui = fluidPage(
                imageOutput("image1")
         ),

         server = function(input, output) {
                 output$image1=renderImage({
         # the images are stored in a subdirectory named images
         filename <- normalizePath(file.path('./images',
                              paste('image1', '.png', sep='')))

         # Return a list containing the filename
         list(src = filename, height = 600,width=800)
         }, deleteFile = FALSE)

         }


     )

```

在第二个代码序列中，我想将图像定位在右侧。见评论“旧版”

```{r, echo = FALSE}

shinyApp(

  ui = fluidPage(

    # Application title
    titlePanel("Tabsets"),

    # my old version
    #img(src=image2.png', align = "right"),
    # my new version with bad alignment - note also the change in server
    imageOutput("image2", height = 200,width=100),


    # Sidebar with controls to select the random distribution type
    # and number of observations to generate. Note the use of the
    # br() element to introduce extra vertical spacing
    sidebarLayout(
      sidebarPanel(
        radioButtons("dist", "Distribution type:",
                     c("Normal" = "norm",
                       "Uniform" = "unif",
                       "Log-normal" = "lnorm",
                       "Exponential" = "exp")),
        br(),

        sliderInput("n", 
                    "Number of observations:", 
                     value = 500,
                     min = 1, 
                     max = 1000)
      ),

      # Show a tabset that includes a plot, summary, and table view
      # of the generated distribution
      mainPanel(
        tabsetPanel(type = "tabs", 
          tabPanel("Plot", plotOutput("plot")), 
          tabPanel("Summary", verbatimTextOutput("summary")), 
          tabPanel("Table", tableOutput("table"))
        )
      )
    )
  ),

  server = function(input, output) {

      # the image rendering - necessary for the image in ui of this app
      output$image2=renderImage({
      # the images are stored in a subdirectory named images
      filename <- normalizePath(file.path('./images',
                                paste('image2', '.png', sep='')))

      # Return a list containing the filename
      list(src = filename, height = 200,width=100)
      }, deleteFile = FALSE)

      # Reactive expression to generate the requested distribution.
      # This is called whenever the inputs change. The output
      # functions defined below then all use the value computed from
      # this expression
      data <- reactive({
        dist <- switch(input$dist,
                       norm = rnorm,
                       unif = runif,
                       lnorm = rlnorm,
                       exp = rexp,
                       rnorm)

        dist(input$n)
      })

      # Generate a plot of the data. Also uses the inputs to build
      # the plot label. Note that the dependencies on both the inputs
      # and the data reactive expression are both tracked, and
      # all expressions are called in the sequence implied by the
      # dependency graph
      output$plot <- renderPlot({
        dist <- input$dist
        n <- input$n

        hist(data(), 
             main=paste('r', dist, '(', n, ')', sep=''))
      })

      # Generate a summary of the data
      output$summary <- renderPrint({
        summary(data())
      })

      # Generate an HTML table view of the data
      output$table <- renderTable({
        data.frame(x=data())
      })

  },


)
```

我希望我提供了足够的信息...但是如果缺少某些内容，请发表评论。我将编辑我的问题。

非常感谢！

第二次编辑：以下是我的文件夹结构和结果。

Answer 1

我认为它可以更容易地完成。对我来说，问题是为图像定义正确的路径。无需使用renderImage！缩放图像可以解决滚动问题，使用 img 可以定义位置（对齐方式）：

---
title: "Documentation"
author: "tueftla"
date: "23 Mai 2017"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(shiny)
```

Here is my documentation …  
and also one of the images.  


```{r, echo = FALSE}

fluidPage(

titlePanel("Tabsets"),

img(src='www/logotitle.jpg', align = "right",width=100,height=100),
# make sure you define the right (full) path

sidebarLayout(
  sidebarPanel(
    radioButtons("dist", "Distribution type:",
                 c("Normal" = "norm",
                   "Uniform" = "unif",
                   "Log-normal" = "lnorm",
                   "Exponential" = "exp")),
    br(),

    sliderInput("n", 
                "Number of observations:", 
                 value = 500,
                 min = 1, 
                 max = 1000)
  ),


  mainPanel(
    tabsetPanel(type = "tabs", 
      tabPanel("Plot", plotOutput("plot")), 
      tabPanel("Summary", verbatimTextOutput("summary")), 
      tabPanel("Table", tableOutput("table"))
    )
  )
))

data <- reactive({
    dist <- switch(input$dist,
                   norm = rnorm,
                   unif = runif,
                   lnorm = rlnorm,
                   exp = rexp,
                   rnorm)

    dist(input$n)
  })

  # Generate a plot of the data. Also uses the inputs to build
  # the plot label. Note that the dependencies on both the inputs
  # and the data reactive expression are both tracked, and
  # all expressions are called in the sequence implied by the
  # dependency graph
  output$plot <- renderPlot({
    dist <- input$dist
    n <- input$n

    hist(data(), 
         main=paste('r', dist, '(', n, ')', sep=''))
  })

  # Generate a summary of the data
  output$summary <- renderPrint({
    summary(data())
  })

  # Generate an HTML table view of the data
  output$table <- renderTable({
    data.frame(x=data())
  })
```

您可以删除 renderImage 部分和所有 ui/server 函数（如前所述），只保留渲染函数和选项卡集。我的结果：