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.
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
#
#
```{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.
