在使用R Markdown时在HTML中包含图像。

huangapple go评论104阅读模式
英文:

Include image in html using R markdown

问题

I have an image named icon.png that I want to put in the title of an html created through RStudio. I got it using this script:

  1. <script>
  2. $(document).ready(function() {
  3. $head = $('#header');
  4. $head.prepend('<img src="Icon.png" style="float: left;width: 150px;"/>')
  5. });
  6. </script>

My question is related to the path of the image. I just got it by putting the file in the same folder as the .Rmd, but I'd like to load the image from a folder called assets in the same folder as the .Rmd.

  • EDA
    -- assets
  • Icon.png
  • file.Rmd

Thank you in advance for your help.

英文:

I have an image named icon.png that I want to put in the title of an html created through RStudio. I got it using this script:

  1. &lt;script&gt;
  2. $(document).ready(function() {
  3. $head = $(&#39;#header&#39;);
  4. $head.prepend(&#39;&lt;img src=\&quot;Icon.png\&quot; style=\&quot;float: left;width: 150px;\&quot;/&gt;&#39;)
  5. });
  6. &lt;/script&gt;

My question is related with the path of the image, I just got it putting the file in the same folder than the .Rmd...but I'd like to load the image from a folder called assets in the same folder than thr -Rmd

  • EDA
    -- assets
  • Icon.png
  • file.Rmd

Thank you in advanced for your help

答案1

得分: 1

Option 1:

更改您的 HTML 脚本中的 "img src" 标签。

像下面这样:

  1. <script>
  2. $(document).ready(function() {
  3. $head = $('#header');
  4. $head.prepend('<img src="assets/Icon.png" style="float: left;width: 150px;"/>')
  5. });
  6. </script>

请注意,使用 HTML 时,您无法引用域根(Web 根)之外的图像文件,请参阅此处:https://webmasters.stackexchange.com/a/48448

Option 2:

您可以使用 Markdown 语法,在这里可以引用位于 .rmd 文件文件夹之外的图像文件。

  1. ---
  2. title: my_document_title ![](../asset_out/Icon.png){width=1in}
  3. output: html_document
  4. date: "2023-05-09"
  5. ---
英文:

Option 1:

You change the img src Tag in your html script.

like below

  1. &lt;script&gt;
  2. $(document).ready(function() {
  3. $head = $(&#39;#header&#39;);
  4. $head.prepend(&#39;&lt;img src=\&quot;assets/Icon.png\&quot; style=\&quot;float: left;width: 150px;\&quot;/&gt;&#39;)
  5. });
  6. &lt;/script&gt;

Note That with HTML you can't reference image files outside the domain root (web root) see here https://webmasters.stackexchange.com/a/48448

Option 2:

You use Markdown syntax, Note here you can reference image files outside the .rmd file folder

  1. ---
  2. title: my_document_title ![](../asset_out/Icon.png){width=1in}
  3. output: html_document
  4. date: &quot;2023-05-09&quot;
  5. ---

huangapple
  • 本文由 发表于 2023年5月7日 04:34:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76191013.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定