GitHub Pages无法渲染HTML图像文件的问题求助

问题原因分析 #

1. GitHub Blob页面的iframe限制：你使用的github.com/.../blob/...链接是GitHub的网页展示页面，该页面设置了X-Frame-Options响应头，禁止被嵌入到iframe中，导致浏览器提示“拒绝连接”。
2. include_relative路径错误：在非README文件中使用{% include_relative %}时，路径是相对于当前Markdown文件的位置，若路径与README中的不一致，就会加载失败。
3. Google Drive链接格式不正确：直接使用Google Drive的分享链接无法直接嵌入iframe，需要调整为预览格式。

具体解决方案 #

方案1：修正iframe链接为Raw文件地址 #

将iframe的src替换为GitHub的原始文件地址，这个地址指向纯HTML内容，没有iframe嵌入限制：

<figure>
    <iframe src="https://raw.githubusercontent.com/WCRF/SysRev-Metan/main/trial_fig.html" style="width: 100%; height: 500px;"></iframe>
</figure>

注意：确保你的HTML文件是公开可访问的，且没有额外的访问限制。

方案2：正确使用Jekyll的include_relative标签 #

如果你的GitHub Pages使用Jekyll构建，确保路径是相对于当前Markdown文件的相对路径：

• 假设当前Markdown文件在docs/posts/目录，而trial_fig.html在仓库根目录，代码应为：

  {% include_relative ../../trial_fig.html %}
  

• 检查仓库的_config.yml，确保没有将该HTML文件加入exclude列表，否则Jekyll不会将其复制到部署后的页面中。

方案3：调整Google Drive链接格式 #

若要嵌入Google Drive中的HTML文件，需将分享链接转换为预览格式：

1. 确保文件设置为“公开可查看”权限
2. 将分享链接中的/file/d/[文件ID]/view替换为/file/d/[文件ID]/preview
3. 使用iframe嵌入：

   <iframe src="https://drive.google.com/file/d/[你的文件ID]/preview" style="width:100%; height:500px;" frameborder="0"></iframe>
   

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