¿Cómo puedo insertar una imagen en la barra de navegación en un navbarPage shiny?

Estoy construyendo una aplicación shiny usando un diseño navbarPage() . Me gustaría insertar una imagen para que esté en el lado derecho de la pantalla, en la barra de navegación. Se parecería a la barra de navegación en la parte superior de, por ejemplo, los sitios de stackoverflow, pero con un logotipo en el extremo derecho. Yo he tratado:

 shinyUI( navbarPage (title="test Page" , img(src="mylogo.gif", style="float:right; padding-right:25px"), tabPanel(title="Panel 1",...) )) 

Sin embargo, todo lo que hace es mostrar la imagen en el extremo derecho, debajo de la barra de navegación, en lugar del contenido de la primera pestaña (Nota: la imagen está en el directorio www según se requiera).

Puedo usar el icon= argumento, pero eso coloca el ícono en la pestaña del navegador.

¿Alguna idea sobre cómo poner la imagen en la barra de navegación?

Ahora puedo responder esta pregunta, al menos para 0.10.0 shiny. La idea general es establecer title= to a div() que contiene tanto la imagen como el texto para el título.

Sin embargo, esto crea un nuevo problema, ya que el argumento icon= ya no funciona y no puede establecer un título para la ventana. Para evitar esto seguí el consejo de Andy Singleton aquí . El consejo es crear una página de fluidPage() sobre la página de navbarPage() que se puede usar para mantener el título y el ícono de la ventana. Al hacer que esta página tenga 0 píxeles de alto, está oculta en la aplicación. Aquí están los bits claves del código.

ui.r:

 shnyUI( fluidPage( list(tags$head(HTML(''))), div(style="padding: 1px 0px; width: '100%'", titlePanel( title="", windowTitle="My Window Title" ) ), navbarPage( title=div(img(src="myLogo.gif"), "My Title in the Navbar"), tabPanel(.... 

Esto se basa en la respuesta de Juan Pablo, pero me parece más simple. Primero coloque el título de su página en una variable, ya que la usaremos dos veces, como título de la ventana y en nuestra página:

 PAGE_TITLE <- "My great title" 

A continuación, en tu página de fluido:

  titlePanel(windowTitle = PAGE_TITLE, title = div( img( src = "my_logo.png", height = 100, width = 100, style = "margin:10px 10px" ), PAGE_TITLE ) ), 

Para aquellos de ustedes que tienen más de una imagen en la barra de navegación, el title= solo funcionará para una de las imágenes, a menos que les guste el formato horrendo.

Este código a continuación le permite al usuario agregar el encabezado con una nueva imagen que también está hipervinculada. Lo usé para crear un logotipo de GitHub y vincular mi repository.

 # Create Right Side Logo/Image with Link tags$script(HTML("var header = $('.navbar > .container-fluid'); header.append(''); #SAME LINE console.log(header)") ), 

header.append través de '); NECESITA ESTAR EN UNA FILA DE CÓDIGO EN R

Todo lo que hacemos es etiquetar esta sección de código como secuencia de comandos HTML, por lo tanto, todo pasa como una cadena de caracteres a R y se lee como código HTML. Afortunadamente, podemos cambiar el tamaño de la imagen y moverla con padding-left,right,top,bottom: _px .

Tenga en cuenta que container-fluid es mi barra de navegación, pero puede ser diferente para su aplicación . Se pueden incluir opciones de formato adicionales en la parte de estilo del código.

enter image description here

Tenga en cuenta que también puede agregar texto y vincularlo de esta manera también.

 # Create Right Side Text tags$script(HTML("var header = $('.navbar > .container-fluid'); header.append('

Follow us on GitHub

'); console.log(header)" )),

De nuevo, asegúrese de que header.append through '); están en la misma línea de código en R

Aquí hay una solución que hice en base a las excelentes respuestas anteriores:

  ui <- fluidPage( list( tags$head( HTML(''))), navbarPage("App user name", windowTitle = "App name", ... 

El lugar para guardar imágenes es la carpeta “www” en el servidor de la aplicación Shiny:

 shinyApp/app.R shinyApp/www/favicon.png