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

<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" />

The below statements do not work

<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
It is http only site and not https
The markdown file was previewed in VS Code.

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 http
1:
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
.
https
Linking to external images, for e.g badges in shield.io / github content works fine and is viewable.

These external images are loaded over https
, which is why they are displayed in the preview.
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.
https
.