我通过RMarkdown渲染超文本标记语言文档使用：
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中，它基本上是这样设置的，当按下按钮时，超文本标记语言图像会发生变化：
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;
});
});
所以，如果我渲染为超文本标记语言，index. html会很好地显示第一张图像。但是，当我点击按钮时，找不到第二张图像（javascript中引用的图像）。javascript代码正在工作，因为文本正在更新。失败的只是图像。
当我检查img_1时，我看到：
当我检查损坏的image_2时，我看到src仍在使用本地“img”文件夹。
所以，不知何故，RMarkdown以某种方式包装了第一个图像，但不是第二个图像？
这两个图像都是本地的，存储在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打包和渲染文件的方式。
发生这种情况是因为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”。我们将使用R的sprintf（）将其作为模板读取，并将“%s”替换为我们实际想要的文本。
接下来，在"my_rmarkdown. RMD"文件中插入以下代码块：
```{r}
h <- "Special Title!"
p <- "Blah blah"
i <- knitr::image_uri("img/image_2.png")
f <- paste(readLines("js/main.fmt"), collapse = "\n")
writeLines(sprintf(f, h, p, i), "js/main.js")
```
现在，您可以像以前一样编织文档了。在编织过程中，R将为您编写一个新的“main. js”文件，从模板开始，用所需的值替换“%s”。值得注意的是，img src值现在将包含base 64编码值，该值将嵌入您的第二张图像到文档中。
正如您在渲染的html中看到的，它使用了base64编码字符串而不是图像源。
您可以尝试的想法：
您正在使用jquery，因此您可以使用. toggle（）方法。这可能看起来像这样
$('#my_button').on('click', function(e) {
$("#img-container-1").toggle();
$("#img-container-2").toggle();
});
其中具有#img-tainer-2的元素默认情况下应用了style="显示：无"。
