2025, Oct 15 18:16
Почему VS Code не показывает HTTP-изображения из Flask в предпросмотре Markdown
Предпросмотр Markdown в VS Code не рендерит http-изображения с Flask. Причина — политика https. Решение: Allow insecure content или раздавать по https.
Когда при предпросмотре Markdown в VS Code внезапно «ломаются» изображения с вашего локального сервера Flask, это сбивает с толку — особенно если те же URL без проблем открываются в браузере. Несоответствие связано с тем, как изолированная среда предпросмотра Markdown обращается с внешними ресурсами. Ниже — краткий разбор сценария сбоя, способа его подтвердить и настроек, которые вернут изображения на место.
Минимальная конфигурация, которая воспроизводит проблему
Приложение отдает SVG и PNG по обычному HTTP. В браузере картинки загружаются напрямую, но предпросмотр Markdown в VS Code не показывает их, если ссылки идут по 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>
В Markdown ссылки на изображения по https корректно отображаются в предпросмотре:
<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" />
А вот ссылки на локальный HTTP‑сервер в предпросмотре не рендерятся, хотя тот же URL в браузере открывается:
<img src="http://10.200.40.182:5050/badge/all_badges/test.png" />
Почему изображения пропадают в предпросмотре Markdown
Предпросмотр Markdown в VS Code работает с жесткими настройками безопасности по умолчанию. Он блокирует сетевые ресурсы, которые не отдаются по https. Поэтому прямой тест в браузере проходит, а предпросмотр молча не загружает ваши http‑изображения.
В целях безопасности VS Code ограничивает содержимое, отображаемое в предпросмотре Markdown. В частности, отключается выполнение скриптов и допускается загрузка ресурсов только по https.
Когда контент блокируется, в углу предпросмотра появляется уведомление. Внешние ресурсы с GitHub или shields.io отображаются без проблем, поскольку отдаются по https.
Что изменить, чтобы все заработало
Если вам нужно, чтобы предпросмотр VS Code загружал изображения по http, воспользуйтесь встроенной настройкой, смягчающей ограничение. Выполните команду Markdown: Change preview security settings и выберите Allow insecure content. Скрипты по‑прежнему останутся выключенными, но контент по http начнет загружаться.
С учетом рисков безопасности разумно включать этот режим лишь временно или перенести раздачу тех же ресурсов на https.
Что это говорит о вашем Flask‑сервере
Поскольку ссылки на изображения в браузере открываются корректно, приложение Flask отдает файлы как задумано для разработки. Проблема не в маршрутизации или MIME‑типах; это изолированная среда предпросмотра по умолчанию принуждает режим «только https». В продакшене Flask часто ставят за отдельным, усиленным HTTP‑сервером или раздают статические ресурсы через CDN — такие решения обычно поддерживают HTTPS «из коробки».
Что важно запомнить в повседневной работе
Перед вами граница безопасности, а не ошибка приложения. Markdown — всего лишь текст; именно среда рендеринга определяет допустимое. Предпросмотр VS Code ставит безопасность на первое место и блокирует ресурсы без https. Вы можете явно ослабить правило через Markdown: Change preview security settings и Allow insecure content — либо обслуживать изображения по https, чтобы они отображались везде без исключений.
Итоги
Если изображения с локального Flask‑сервера открываются в браузере, но не видны в предпросмотре Markdown в VS Code, виновата политика «только https» по умолчанию. Либо разрешите небезопасный контент в предпросмотре Markdown, либо публикуйте изображения по https. Если вы готовите документацию или README для широкой аудитории, отдавайте предпочтение https — так контент будет отображаться стабильно и безопасно.