Вставьте логотип в верхнем правом углу документа R markdown html

Я пытаюсь разместить логотип своей компании в правом углу моего html-документа

Здесь мой код:

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

Однако, поскольку logo.png является локальным файлом при совместном использовании документа html, люди не могут его видеть.

Кроме того, я попробовал следующий подход

---
title: "Title"
author: "Author"
date: "Date"

output: 
  html_document:
    css: markdown.css
    includes:
      in_header: extLogo.html
---

где extLogo.html

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

Но он создает div вне div, где Title (<div class="container-fluid main-container">). Может ли кто-нибудь помочь в этом?

Ответ 1

Вы можете использовать htmltools::img с небольшим встроенным CSS для позиционирования. src может идти по прямой, но когда изображения обрабатываются не как графики, иногда вязание не позволяет правильно преобразовать изображения в URI, что в свою очередь заставляет их не отображать. Использование self_contained: false в YAML - это быстрое решение, но не намного сложнее использовать knitr::image_uri для ручного преобразования изображения:

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

Ответ 2

Принятый ответ работает, если вы используете классический вывод html. Если мне нравится, вы также работаете с bookdown, логотип должен появляться на всех страницах. Итак, если кто-нибудь найдет этот ответ, но захочет добавить логотип с книжным шкафом, я даю свое предложение:

Нам нужно создать внешний файл с script для вызова в заголовке, к счастью, мы можем создать его непосредственно в rmarkdown script.
Мы также используем htmltools::img, чтобы включить изображение без внешнего файла изображения.

Вот мой пример rmarkdown script, который будет использоваться в качестве примера:

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