Rmarkdown: Linking to img in inline shiny app / shinydashboard when using shinyApp() function

I'm creating an internal tutorial in Rmarkdown on how my company should use shiny and shinyDashboard. I'm taking advantage of runtime: shiny so that the shiny part of the code in the Rmarkdown file is actually being run.

However, I'm having a problem where I can't have the best of both worlds. I want to wrap my dashboard structure in a shinyApp() function call so that the standard shinydashboard CSS gets applied to the output while also allowing me to control the height of the shiny thing being run. This however leads to problems for me when linking to a image I use in the dashboard.

This might not be too clear in writing.

So what am I talking about?

Here is how the handbook looks without a call to shinyApp, thus without the CSS I want and without the height option.

The code in question for the chunk that generates this:

dashboardPage(skin = 'black',
                    dashboardHeader(title = 'Title of dashboard',
                                    titleWidth = 230,
                                    tags$li(a(href = 'example.org',
                                              img(src = 'logo.png', 
                                                  title = 'Go to main website', 
                                                  height = '30px'),
                                              style = 'padding-top:10px; padding-bottom:10px'),
                                            class = 'dropdown')),
                    dashboardSidebar(
                      
                      sidebarMenu(
                        menuItem('Main part', tabName = 'main', icon = icon("landmark")),
                        menuItem('Sub-dashboard nr. 1', tabName = 'nr1', icon = icon("hand-holding-heart")),
                        menuItem('Sub-dashboard nr. 2', tabName = 'nr2', icon = icon('child'))
                        )),
                    dashboardBody()
                    )

Dagnabbit!

This is not exactly what I want

If want to get the standard CSS and the option of changing the height I'd go about it this way, having a ui object and a server object and wrapping those in a call to shinyApp.

shinyApp(

  
ui = dashboardPage(skin = 'black',
                    dashboardHeader(title = 'Title of dashboard',
                                    titleWidth = 230,
                                    tags$li(a(href = 'example.org',
                                              img(src = 'logo.png', 
                                                  title = 'Go to main website', 
                                                  height = '30px'),
                                              style = 'padding-top:10px; padding-bottom:10px'),
                                            class = 'dropdown')),
                    dashboardSidebar(
                      
                      sidebarMenu(
                        menuItem('Main part', tabName = 'main', icon = icon("landmark")),
                        menuItem('Sub-dashboard nr. 1', tabName = 'nr1', icon = icon("hand-holding-heart")),
                        menuItem('Sub-dashboard nr. 2', tabName = 'nr2', icon = icon('child'))
                        )),
                    dashboardBody()
                    ),
server = function(input, output) {},

  options = list(height = 300)
)

When using this approach, the link to the file logo.png breaks as the name of the app being spun up, a mostly random string such as app6e2984c4c3cae132455be456962ca1ca, gets added to the image address.

How could I go about doing this so the image shows up in the inline app?

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.