Rendering images in documents and embedded shiny apps - r

Question

When I insert an embedded shiny app to my document like showed on Embedded Shiny Apps, with “runtime: shiny” in the YAML and click the button “Run Document” there are only image placeholder icons.
But when I remove the shiny app and also remove the “runtime: shiny” from the YAML the embedded image is visible after rendering.
The following to links have the topic of embedding images but none solves my issue – in both cases the image placeholder icon remains.
https://github.com/rstudio/rmarkdown/issues/504
Embedding Image in Shiny App
Question:
What should I change in my code to get the images?
Or has it something to do with my initial choice of encoding?
Below my code example with an embedded shiny app – so when necessary you just need to copy and paste. The shiny app is just a copy from the r studio gallery…
EDIT: As suggested by timfaber I added the renderImage() parts in the code. But two question concering the rendering still remain.
How can I suppress the need for scroll up or down to see the entire image? and How can I position an image in an shiny app?
---
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)
}
)
```
In the second code sequence I want to position the image at the right. See the comment "old version"
```{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())
})
},
)
```
I hope I gave enough information... but when something is missing please comment. I will edit my question.
Many thanks in advance!
Second Edit: The following is showing my folder structure and the result.

Answer 1

I think it can be done a lot easier. For me the problem was defining the right path for the image. No need to use renderImage! Scaling the image resolves the scrolling and using img allows you to define the position (alignment):
---
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())
})
```
You can remove the renderImage part and all the ui/server functions (as stated earlier), simply keeping the render functions and tabsets. My result: