2025, Oct 15 18:00
VS Code Markdown preview blocking HTTP images from a local Flask server: why it happens and how to fix
Learn why VS Code's Markdown preview blocks HTTP images from a local Flask server and how to fix it by allowing insecure content or serving assets over HTTPS.
Previewing Markdown in VS Code and suddenly seeing broken images from your local Flask server is a head-scratcher, especially when the same URLs open fine in the browser. The mismatch comes from how the Markdown preview sandbox treats external resources. Here’s a focused walkthrough of the failure mode, how to validate it, and what to change to make your images appear.
Minimal setup that reproduces the issue
The application serves SVG and PNG over plain HTTP. Images load directly in the browser, but VS Code’s Markdown preview does not display them when linked over http.
@app.route('/asset/<path:rel_path>')
def deliver_media(rel_path):
root_dir = <folder name>
full_path = os.path.join(root_dir, rel_path)
if not os.path.exists(full_path):
return abort(404)
if os.path.isfile(full_path):
if full_path.endswith(".svg"):
return send_file(full_path, mimetype='image/svg+xml')
return send_file(full_path)
return abort(404)
@app.route('/label/<path:inner_path>')
def show_badge(inner_path):
return render_template('badge_view.html', media_ref=inner_path)
<!DOCTYPE html>
<html>
<body>
<img src="{{ url_for('static', filename=media_ref) }}" />
</body>
</html>
In Markdown, links to https images render correctly in the preview:
<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" />
But links to the local HTTP server do not render in the preview, even though opening the same URL in a browser works:
<img src="http://10.200.40.182:5050/badge/all_badges/test.png" />
Why the images vanish in the Markdown preview
VS Code’s Markdown preview runs with strict security defaults. It blocks network resources that are not served over https. That’s why your direct browser test succeeds while the preview quietly refuses to load your http images.
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.
When content gets blocked, the preview shows an alert in the corner. External assets from GitHub or shields.io display fine because they are served over https.
What to change to make it work
If you need the VS Code preview to load images over http, use the built-in setting to loosen the restriction. Run the command Markdown: Change preview security settings and select Allow insecure content. This keeps scripts disabled but allows content to be loaded over http.
Given the security ramifications, it’s reasonable to enable this only temporarily or switch to hosting the same assets over https.
What this tells you about your Flask server
Since the image URLs open correctly in a browser, the Flask app is serving files as intended for development. The failure is not in the routing or MIME handling; it’s the preview sandbox enforcing https-only by default. In production scenarios, it’s common to put Flask behind a separate, hardened HTTP server or serve assets via a CDN; these typically come with HTTPS support out of the box.
Key takeaways for daily work
This is a security boundary, not an app bug. Markdown is just text; the environment that renders it defines what’s allowed. VS Code’s preview favors safety and blocks non-https resources. You can explicitly relax that via Markdown: Change preview security settings and Allow insecure content, or serve your images over https so they render everywhere without exceptions.
Conclusion
When a local Flask server’s images load in the browser but not in the VS Code Markdown preview, the default https-only policy is the cause. Either permit insecure content in the Markdown preview or expose the images over https. If you’re preparing docs or READMEs meant to be widely consumed, prefer https so your content renders consistently and securely.