pythonvisual-studio-codeflaskmarkdown

VS Code not rendering Markdown image links to local Flask site


I have created a Flask site to serve static images. It is http only site and not https

I can view these images (mainly svg but also a png file for testing) in the browser. However when I try to link them in a markdown file, they are not visible. I am able to link to external images in the markdown and view them but not the ones from my site.

I am using the following code to view the images

Method 1

@app.route('/image/<path:req_path>')
def send_image(req_path):
    base_dir = <folder name>
    abs_path = os.path.join(base_dir, req_path)
    if not os.path.exists(abs_path):
        return abort(404)
    if os.path.isfile(abs_path):
        if abs_path.endswith(".svg"):
            return send_file(abs_path, mimetype='image/svg+xml')
        else:
            return send_file(abs_path)
    return abort(404)

Method 2

@app.route('/badge/<path:filepath>')
def send_img(filepath):
    return render_template('badges.html', badge_path=filepath)

badges.html as follows

<!DOCTYPE html>
<html>
<body>
<img src="{{url_for('static', filename=badge_path)}}" />
</body>
</html>

In both instances, the image is viewable in the browser but not visible in the markdown - I believe the paths etc are correct because I can ctrl+click the path and it is viewable in the browser.

I want to know why Markdown is unable to preview the images.

Created a markdown file and linked the images and expected the images to show up

The markdown file was previewed in VS Code. Linking to external images, for e.g badges in shield.io / github content works fine and is viewable.

For e.g. The following two statements show the image in the preview mode

![A mushroom-head robot drinking bubble tea](https://raw.githubusercontent.com/Codecademy/docs/main/media/codey.jpg)

<img src="https://raw.githubusercontent.com/Codecademy/docs/main/media/codey.jpg" />

<img src="https://img.shields.io/badge/Signal-%23039BE5.svg?&style=for-the-badge&logo=Signal&logoColor=white" />

![Test](https://img.shields.io/badge/Signal-%23039BE5.svg?&style=for-the-badge&logo=Signal&logoColor=white)

The below statements do not work

![What!!!](http://10.200.40.182:5050/badge/all_badges/test.png)

<img src="http://10.200.40.182:5050/badge/all_badges/test.png" />

Even though clicking on the link / pasting the link + enter shows the image in the browser


Solution

  • It is http only site and not https

    The markdown file was previewed in VS Code.

    ![What!!!](http://10.200.40.182:5050/badge/all_badges/test.png)
    

    According to the VS Code documentation page on Markdown, specifically the section on Markdown preview security, resources are only loaded over https by default:

    Markdown preview security

    For security reasons, VS Code restricts the content displayed in the Markdown preview. This includes disabling script execution and only allowing resources to be loaded over https.

    As a result, the default settings of VS Code would block images that you try to load over http, along with showing a popup about this:

    When the Markdown preview blocks content on a page, an alert popup is shown in the top right corner of the preview window:

    If you want to, you can change the settings to "Allow insecure content" to allow http1:

    You can change what content is allowed in the Markdown preview by clicking on this popup or running the Markdown: Change preview security settings command in any Markdown file:

    [...]

    Allow insecure content

    Keeps scripts disabled but allows content to be loaded over http.

    External images use https

    Linking to external images, for e.g badges in shield.io / github content works fine and is viewable.

    ![A mushroom-head robot drinking bubble tea](https://raw.githubusercontent.com/Codecademy/docs/main/media/codey.jpg)
    

    These external images are loaded over https, which is why they are displayed in the preview.

    Flask server

    the image is viewable in the browser

    Even though clicking on the link / pasting the link + enter shows the image in the browser

    Given that your image is still viewable in your browser, this would suggest that your Flask server is otherwise properly serving these assets for development2.


    1. Given security ramifications, you may only want to do this temporarily, or otherwise host your images via https.
    2. Flask suggests fronting with a separate, hardened HTTP server in production. You could also serve assets with a CDN in production. Both of these options will typically have HTTPS support built-in.