如何用htmltools在RMarkdown中加载本地文件：

Question

我使用以下方法通过RMarkdown呈现一个HTML文档：

htmltools::includeHTML("index.html")

我的index.html基本上是这样设置的：

    <!-- Clicking the button changes the image displayed-->
    <label class="btn btn-default active" id="my_button">
          <input class="btn" type="radio" name="options" autocomplete="off" > This Displays Other Image
        </label>

    <div class="container" style="padding-bottom:0px">
      <div class="row" id="od-content">
        <div class="col-md-10"> 
            <h2 class="mb-3">Title</h2> 
                <p>
                   Blah blah blah
                </p>
                <p class="viz-photo">             
                    <div class="col-12"> 
                        <img class="img-fluid viz" src="img/image_1.png" alt="Card image cap">
                    </div>
                </p>
        </div> 
      </div>
    </div>
  </div>
     
  <script src="js/main.js"></script>

在main.js中，它基本上是设置好的，这样当按下按钮时，HTML图像就会发生变化：

var special_content = '<div class="col-md-10">' + 
                            '<h2 class="mb-3">Special Title!</h2>' +    
                            '<p>' +
                                'Blah blah' +
                            '</p>' +
                            '<p class="viz-photo">' +             
                                '<div class="col-12">' + 
                                    '<img class="img-fluid viz" src="img/image_2.png" alt="Card image cap">' +
                                '</div>' +
                            '</p>' +
                          '</div>' 


$(document).ready(function(){ 
  $('#my_button').on('click', function(e) {

  
  document.getElementById("od-content").innerHTML = special_content;
  });
});

因此，如果我呈现为HTML，index.html就会显示第一个图像。但是，当我单击该按钮时，无法找到第二个图像(javascript中引用的图像)。javascript代码正在工作，因为文本正在更新。这只是一个失败的形象。

当我检查img_1时，我看到：

​

​

当我检查损坏的image_2时，我发现src仍然在使用本地的"img“文件夹。

所以，不知怎么的，packaging是将第一个图像打包成独立的，而不是第二个图像？

这两个图像都是本地的，并存储在img文件夹中。因此，RMarkdown能够呈现image_1，但不能呈现image_2。

My_Folder
    -img folder
         -image_1.png
         -image_2.png
    -CSS folder
    -js folder
         -main.js
    -index.html
    -my_rmarkdown.RMD

我也尝试过，但没有运气：

render("my_rmarkdown.Rmd", html_document(pandoc_args = "--self-contained"))

为什么会发生这种事？这必须是Rmarkdown打包和呈现文件的方式。

Answer 1

之所以会发生这种情况，是因为pandoc没有被编程用于在脚本标记中搜索要嵌入的资源。

因此，一种选择是自己嵌入资源。幸运的是，{knitr}具有一个函数img_uri()，它将为我们读取图像数据并对其进行基本编码。

首先，在"js“目录中创建一个"main.fmt”文件，其中包含以下内容：

var special_content = '<div class="col-md-10">' + 
                            '<h2 class="mb-3">%s</h2>' +    
                            '<p>' +
                                '%s' +
                            '</p>' +
                            '<p class="viz-photo">' +             
                                '<div class="col-12">' + 
                                    '<img class="img-fluid viz" src="%s" alt="Card image cap">' +
                                '</div>' +
                            '</p>' +
                          '</div>' 


$(document).ready(function(){ 
  $('#my_button').on('click', function(e) {

  
  document.getElementById("od-content").innerHTML = special_content;
  });
});

请注意，这个文件包含原始的javascript，但是特殊的标题标题、文本和图像src已经被“%s”替换为“%s”。我们将使用R的sprintf()来读取它作为模板，并将“%s”替换为我们实际需要的文本。

接下来，在"my_rmarkdown.RMD“文件中插入以下代码块：

```{r}

H <- -“特别标题！”

P <- "Blah blah“

I <- knitr::image_uri("img/image_2.png")

F <-粘贴(readLines(“js/main.fmt”)，倒置= "\n")

writeLines(sprintf(f，h，p，i)，"js/main.js")

现在，您可以像以前那样编织文档。在编织过程中，R将为您编写一个新的"main.js“文件，从模板开始，并将”%s“替换为所需的值。特别要注意的是，img值现在将包含基础64编码值，该值将嵌入第二个图像到文档中。

Answer 2

正如您在呈现的html中所看到的，它使用的是base64编码的字符串，而不是图像源。

你可以尝试的想法：

如果您的主机中有公用文件夹，则

• 定位。通常可以访问其中的所有内容。
• 同时加载两个图像。您可以设置一个图像以显示: none并将其交换出去。
• 对这两个图像进行编码，而不是交换到图像的链接，而是交换编码的字符串.

。

您正在使用jquery，以便可以使用.toggle()方法。可能看起来像这样

$('#my_button').on('click', function(e) {
    $("#img-container-1").toggle();
    $("#img-container-2").toggle();
});

默认情况下，带有#img-container-2的元素具有应用style="display: none"的情况。