html - 在R markdown html文档的右上角插入一个标志

Question

我想把我公司的标志放在我的 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 ( <div class="container-fluid main-container"> )。有人可以帮忙吗？

Answer 1

您可以使用 htmltools::img 和一些内联 CSS 进行定位。 src 可以直接获取路径，但是当图像不只是像绘图一样处理时，有时 knitting 无法将图像正确转换为 URI，进而导致它们无法呈现。在 YAML 中使用 self_contained: false 是一个快速的解决方案，但使用 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.