【问题标题】:R Markdown: Putting an image in the top right hand corner of HTML and moving title downR Markdown:将图像放在HTML的右上角并向下移动标题
【发布时间】:2016-11-14 23:30:32
【问题描述】:

我想在我的 R markdown 报告的右上角放置一个公司徽标图像,然后将标题向下移动,例如比默认位置低 3 或 4 厘米。这个想法是它看起来像公司的信笺抬头。

谁能建议我如何在我的 .Rmd 文件中编写代码?

感谢您的帮助!

【问题讨论】:

标签: html css r r-markdown


【解决方案1】:

选项 1:

将此脚本添加到 RMarkdown 文档的开头(或其他位置):

<script>
   $(document).ready(function() {
     $head = $('#header');
     $head.prepend('<img src=\"logo.jpg\" style=\"float: right;width: 150px;\"/>')
   });
</script>

这看起来像

要使脚本正常工作,图像必须与 .Rmd 文档位于同一文件夹中。您还可以给&lt;img&gt;tag 指定id 并添加更精确的CSS 样式

<style>
  #myLogo {
    float: right;
    width: 120px;
    ...
</style>

选项 2:

创建一个包含如下标志的额外 HTML 文件(例如 extLogo.html):

<div><img src="logo.jpg" width="200px" align="right"></div>

然后像这样修改 YAML 标头:

---
title: "Test"
author: "Martin Schmelzer"
date: "13 Juli 2016"
output: 
  html_document:
    includes:
      in_header: extLogo.html
---

这看起来像

并且可能需要一些进一步的边距/填充选项...

【讨论】:

    【解决方案2】:

    如果您将 img src 更改为 base 64 代码(因为大尺寸真的很乱),那么图像不再依赖于您的本地目录,例如您可以通过电子邮件发送 html 文件以使用交互式报告。

    base64 编码器: https://www.base64decode.org/

    【讨论】:

    • 选项一确实如此。无需为选项 2 做任何事情。尽管选项 2 似乎打破了我的浮动内容表
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-10-04
    • 2011-11-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多