图像不显示在 reStructuredText (.rst) - HTML - 在 VS Code 中预览

问题描述

根据 docs,图像应该可以在 HTML 预览中显示,如下所示:

.. image:: /path/to/image.jpg

然而,在带有 VS Code 的 Windows 10 上的 reStructuredTest - extension 1.56.2 版中,HTML 预览不显示真实图片,而只显示占位符。 我用类 UNIX 和类似 Windows 的路径进行了尝试:

Image does not display in RST-files

我使用的代码是:

...
4) ...
5) .. image:: C:\Users\andreas.luckert\Downloads\Step-Functions-page1.png
6) .. image:: /c/Users/andreas.luckert/Downloads/Step-Functions-page2.png

解决方法

您提供的链接不是指向 official Sphinx docs,而是一个 wiki 页面。以下是处理 images 的文档。

reST 支持图像指令 (ref),使用方式如下:

.. image:: gnu.png
    (options)

在 Sphinx 中使用时,给定的文件名(此处为 gnu.png)必须是相对于源文件的,或者是绝对的,这意味着它们相对于顶级源目录。例如,文件 sketch/spam.rst 可以将图像 images/spam.png 引用为 ../images/spam.png/images/spam.png

Sphinx 会在构建时自动将图像文件复制到输出目录的子目录中(例如,HTML 输出的 _static 目录。)

因此,将您的图像放在顶级源目录中名为 _static 的目录中,然后按如下方式更新图像的相对路径。

.. image:: _static/path/to/my-image.png
    (options)