Images are not displayed in reStructuredText (.rst) - HTML - preview in VS Code

Question

According to the docs, an image should be displayable in the HTML-preview like so:

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

Yet, on VS Code version 1.56.2 on Windows 10 with the reStructuredTest - extension, the HTML-preview doesn't show the real picture, but only placeholders. I tried it with both UNIX- and Windows-like paths:

The code I used is:

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

Answer 1

The link you provided is not to the official Sphinx docs, but a wiki page. Here are the docs for handling images.

reST supports an image directive (ref), used like so:

.. image:: gnu.png
    (options)

When used within Sphinx, the file name given (here gnu.png) must either be relative to the source file, or absolute which means that they are relative to the top source directory. For example, the file sketch/spam.rst could refer to the image images/spam.png as ../images/spam.png or /images/spam.png.

Sphinx will automatically copy image files over to a subdirectory of the output directory on building (e.g. the _static directory for HTML output.)

So put your images in a directory named _static inside your top source directory, then update the relative path to the images as follows.

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