Insert a logo in upper right corner of R markdown html document

Question

I'm trying to put my company logo on the right corner of my html document

Here my code:

<script>   $(document).ready(function() {     $head = $('#header');     $head.prepend('<div class="knitr source"><img src="logo.png" width="220px" align="right"   ></div>')   }); </script>  --- title: "Title" author: "Author" date: "Date" theme: bootstrap output: html_document keep_md: true ---  ```{r echo=FALSE,  include=FALSE} knitr::include_graphics('./logo.png') ```  <br>  ## 1) Header  <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 

However, because the logo.png is a local file when sharing the html document people are not able to see it.

Additionally, I tried the following approach

--- title: "Title" author: "Author" date: "Date"  output:    html_document:     css: markdown.css     includes:       in_header: extLogo.html --- 

where extLogo.html

<div class="logos"><img src="logo.png" width="220px" align="right"></div> 

But it creates a div outside the div where the Title is (<div class="container-fluid main-container">). Can anyone help on this?

Answer 1

You can use htmltools::img with a little inline CSS for positioning. src can take a path directly, but when images aren't just handled like plots, sometimes knitting fails to convert images to a URI properly, which in turn causes them to fail to render. Using self_contained: false in the YAML is a quick solution, but it's not much harder to use knitr::image_uri to manually convert the image:

--- 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. 

Answer 2

The accepted answer works if you are using classical html output. If like me, you also work with bookdown, the logo need to appear on every pages. So, in case somebody find this answer but want to add a logo with bookdown, I give my proposition:

• We need to create an external file with a script to be called in header, thankfully we can create it directly in the rmarkdown script.
• We also use htmltools::img to allow including the image without external image file.

Here is my rmarkdown script to be used as an example:

--- 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.