Inserte un logotipo en la esquina superior derecha del documento html de R Markdown

Solución:

Puedes usar htmltools::img con un poco de CSS en línea para el posicionamiento. src puede tomar una ruta directamente, pero cuando las imágenes no se manejan simplemente como diagramas, a veces el tejido no convierte las imágenes en un URI correctamente, lo que a su vez hace que no se procesen. Utilizando self_contained: false en YAML es una solución rápida, pero no es mucho más difícil de usar knitr::image_uri para convertir manualmente la imagen:

---
title: "Title"
author: "Author"
output: html_document
---


```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), 
               alt="logo", 
               style="position:absolute; top:0; right:0; padding:10px;")
```

---

# 1. Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

La respuesta aceptada funciona si está utilizando una salida html clásica. Si como yo, también trabajas con bookdown, el logotipo debe aparecer en todas las páginas. Entonces, en caso de que alguien encuentre esta respuesta pero quiera agregar un logotipo con bookdown, doy mi propuesta:

• Necesitamos crear un archivo externo con un script que se llamará en el encabezado, afortunadamente podemos crearlo directamente en el script rmarkdown.
• También usamos htmltools::img para permitir incluir la imagen sin archivo de imagen externo.

Aquí está mi script rmarkdown para usar como ejemplo:

---
title: "Logo with Bookdown"
author: "Author"
date: '`r format(Sys.time(), "%d %B, %Y")`'
output:
  bookdown::gitbook:
    includes:
      in_header: header.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r htmlTemplate, echo=FALSE}
# Create the external file
img <- htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), 
               alt="logo", 
               style="position:absolute; top:50px; right:1%; padding:10px;z-index:200;")

htmlhead <- paste0('
<script>
document.write('<div class="logos">',img,'</div>')
</script>
')

readr::write_lines(htmlhead, path = "header.html")

```

# Page 1

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
summary(cars)
```

# Page 2

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

Tomé un enfoque bastante diferente a las respuestas anteriores, usando solo CSS y sin posicionamiento absoluto. Agregué el siguiente fragmento de código CSS a mi documento, pero también puede crear un archivo CSS independiente e incluirlo en el encabezado Rmd YAML.

```{css, echo=FALSE}
#header {
  background-image: url("data: BASE64 encoded string for image");
  background-repeat: no-repeat;
  background-position: 95%;
  padding: 5px;
}
#header > * {
  max-width: calc(100% - 225px);
}
@media only screen and (max-width:600px){
#header > .title { 
  margin-top: 105px;
}
#header > *
  max-width: 100%;
}
#header {
  background-position: 10px 10px;
}
}
```

Aquí están sucediendo algunas cosas. Para abordar la pregunta original sobre la imagen, debe codificar en base64 la imagen usted mismo y poner la cadena en la URL de la imagen de fondo.

También maneja el problema de la superposición del logotipo y el contenido del encabezado de una manera reactiva, estableciendo max-width en todos los elementos del encabezado y colocando el logotipo sobre el título en ventanas estrechas (menos de 600 px).

Si no le importa en absoluto la superposición, entonces solo necesita la primera #header código selector. Si no le importa el diseño reactivo del dispositivo estrecho, puede mantener los dos primeros selectores y eliminar el bloque @media.

Los dos valores de píxeles 225px y 105px se basan en mi logotipo y deberán cambiarse para adaptarse a su imagen más algo de relleno.

---

---

Utiliza Nuestro Buscador