Quarto/RStudio嵌入本地Plotly HTML文件iFrame显示空白的解决方法

1. 先核对文件路径 #

• 确保figures/community_areas_shootings_plotly.html的路径是相对Quarto文档所在位置的，而非渲染后输出文件的位置。比如你的Quarto文档在项目根目录，figures文件夹也在根目录，这个路径才正确；如果文档在子文件夹里，路径要改成../figures/community_areas_shootings_plotly.html。
• 直接在浏览器里输入这个文件的绝对路径（比如file:///你的项目路径/figures/community_areas_shootings_plotly.html），看看HTML文件本身能不能正常显示。如果浏览器里也空白，那是Plotly文件生成有问题，得重新导出图表。

2. 调整Quarto的HTML渲染设置 #

本地加载文件可能碰到跨源限制，在Quarto文档的YAML头部加下面的设置试试：

format:
  html:
    embed-resources: true
    self-contained: false

• embed-resources: true会把外部资源嵌入输出HTML，避免路径坑；
• self-contained: false允许加载本地外部文件，适合保留交互性的场景。

3. 用Quarto原生方式嵌入（更靠谱） #

别用iframe硬写了，Quarto支持直接嵌入Plotly HTML，换下面的写法：
要么用HTML代码块：

```{html}
<iframe src="figures/community_areas_shootings_plotly.html" width="100%" height="250"></iframe>

要么用Quarto的短代码，更简洁：

{{< include-html "figures/community_areas_shootings_plotly.html" >}}

这种方式会自动处理路径和资源加载问题，比直接写iframe稳得多。

4. 检查Plotly HTML文件是否完整 #

打开那个HTML文件看源码，里面得有完整的Plotly.js脚本和图表数据。如果只有空的容器标签，说明导出时出错了，重新运行生成图表的代码——比如用Python的plotly.offline.plot()时，要确保指定了正确的输出路径，别漏了生成完整内容。

5. 调整iframe的尺寸 #

有时候空白是因为高度设太小了，试试把height改成600，看看能不能显示内容。另外检查一下有没有CSS样式把iframe给隐藏了（比如父元素设了display: none或者overflow: hidden）。

内容的提问来源于stack exchange，提问作者saulpink