I would like to display in my web application an SVG image that I have hosted in the images folder. First I tried to display it with a tag but it didn't work:
ui <- fluidPage(
tags$img(src = "./images/SVG_Logo.svg", width = "99px")
)
Then I used the rsvg and htmltools packages:
library(shiny)
library(htmltools)
library(rsvg)
#Load SVG image
miLogo <- rsvg_svg("./images/SVG_Logo.svg", width = 99)
miLogo_html <- as.character(miLogo)
ui <- fluidPage(
HTML(miLogo_html)
)
server <- function(input, output, session) {
}
shinyApp(ui = ui, server = server)
But I couldn't get it to work either. In both cases the browser displays this:
But if I replace the source path for example by: https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg
It works correctly
Could someone help me, please?
Best regards,
Wardiam
This code works for me. I had to create an images folder inside the www folder. Have you created a www folder to store your assets?
library(shiny)
library(htmltools)
ui <- fluidPage(
# tags$img(src = "https://raw.githubusercontent.com/paladinic/data/main/LINEA_black.svg", width = "99px")
tags$img(src = "./images/logo.svg", width = "99px")
)
server <- function(input, output, session) {
}
shinyApp(ui = ui, server = server)
Related
I am having a shiny app with some ui elements.
Is there a way to replace some HTML (e.g. div / div content) with an animation effect, similar to what shinyjs::show(anim=T) does?
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::html("someDiv", "changed without animation")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
the shinyjs::html doesn't provide this utility. We can write our own js code and use shinyjs::runjs to run it when button is clicked.
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::runjs("$('#someDiv').fadeOut(500, function(){$(this).text('changed without animation').fadeIn();})")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
this question is a follow-up of previous post Create URL hyperlink in R Shiny? .
I'm using the solution shared there, namely:
runApp(
list(ui = fluidPage(
uiOutput("tab")
),
server = function(input, output, session){
url <- a("Google Homepage", href="https://www.google.com/")
output$tab <- renderUI({
tagList("URL link:", url)
})
})
)
The solution above works fine. However, I would need to:
customize the font size and color
make sure the link opens up a new page in a new browser tab.
I can't find a way to achieve these two goals and I'm not familiar with HTML. Any help would be much appreciated. Thanks
Use style to change font size and color and target="_blank" to open the link in new tab.
library(shiny)
runApp(
list(ui = fluidPage(
uiOutput("tab")
),
server = function(input, output, session){
url <- a("Google Homepage", href="https://www.google.com/",
style = "color:orange;font-size:18px", target="_blank")
output$tab <- renderUI({
tagList("URL link:", url)
})
})
)
I am not able to find the error why the pic is not getting displayed inside the infoBox, shinyApp.
library(shiny)
library(shinydashboard)
a <- 45
ui <- shinyUI(
dashboardPage(
dashboardHeader(title = "ABC"),
dashboardSidebar(),
dashboardBody(
fluidPage(
infoBox("BCD", a, div(img(src = "img.png", width = 100), style = "text-
align: center;"))
)
)
)
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
The following worked for me:
Save the above script as app.R
In the folder of app.R, create a folder named www and save img.png in it
hit the Run App button on RStudio (top right)
You might want to have a look at the addResourcePath function for a more flexibel solution:
http://shiny.rstudio.com/reference/shiny/0.14/addResourcePath.html
In my current project, I am trying to load images to shiny dashboard using R. The code snippet is as shown below:
dashboardBody(
hr(),
fluidRow(
column(6,align="center",imageOutput("ginger"))
)
)
)
server <- function(input, output) {
output$ginger <- renderImage({
return(list(
src = "images/ginger.jpg",
contentType = "image/jpeg",
width = 300,
height = 200,
alt = "Face"
))
}, deleteFile = FALSE)
Basically, it just display the image on the shiny dashboard. Here the image is stored in the local machine. Now, I want to load image from google drive or from the web. I am trying to load the image from my google drive and URL is https://drive.google.com/file/d/0By6SOdXnt-LFaDhpMlg3b3FiTEU/view.
I could not able to figure out that how to load images from google drive or web in shiny and how to add title in the image also? Am I missing something?
This answer is instructive. Here's a barebones shiny app with an external image call to display the image that you mention on your Google Drive account.
library(shiny)
# Define UI with external image call
ui <- fluidPage(
titlePanel("Look at the image below"),
sidebarLayout(sidebarPanel(),
mainPanel(htmlOutput("picture"))))
# Define server with information needed to hotlink image
server <- function(input, output) {
output$picture <-
renderText({
c(
'<img src="',
"http://drive.google.com/uc?export=view&id=0By6SOdXnt-LFaDhpMlg3b3FiTEU",
'">'
)
})
}
shinyApp(ui = ui, server = server)
I have a Shiny app that returns a character string containing the direct URL to an image hosted on the web. I am trying to find a way to display this image directly as an output.
When using renderImage() with src = "image url" the app does not display the image.
Here is an example of the problem:
ui.R
library(shiny)
shinyUI(fluidPage(
headerPanel("render externally hosted Image example"),
mainPanel(
# Use imageOutput to place the image on the page
imageOutput("myImage")
)
))
server.R
library(shiny)
shinyServer(function(input, output, session) {
output$myImage <- renderImage({
list(src = "http://data-informed.com/wp-content/uploads/2013/11/R-language-logo-224x136.png",
contentType = 'image/png',
width = 224,
height = 136,
alt = "This is image alternate text")
})
})
Any help is appreciated!
You could use htmlOutput() in the ui and renderText() in server.
Server.r
src = "https://theWeb/aPictureSomewhere.jpg"
output$picture<-renderText({c('<img src="',src,'">')})
ui.r
htmlOutput("picture")