2025, Oct 15 18:31
VS Code के Markdown प्रीव्यू में लोकल Flask HTTP इमेज गायब: कारण और समाधान
VS Code Markdown प्रीव्यू में लोकल Flask HTTP इमेज न दिखतीं क्योंकि https-only सुरक्षा लागू होती है. समाधान: Allow insecure content चुनें या एसेट्स को HTTPS पर सर्व करें.
VS Code में Markdown का पूर्वावलोकन करते समय, स्थानीय Flask सर्वर से आने वाली छवियों का अचानक टूट जाना उलझन पैदा करता है — खासकर तब, जब वही URL ब्राउज़र में बिना दिक्कत खुलते हैं। यह असमानता Markdown प्रीव्यू के सैंडबॉक्स द्वारा बाहरी संसाधनों के साथ किए गए व्यवहार से आती है। नीचे विफलता के तरीके, उसे परखने के कदम, और छवियाँ दिखाने के लिए क्या बदलना है — इन सबका केंद्रित मार्गदर्शन दिया गया है।
समस्या को पुन: उत्पन्न करने वाला न्यूनतम सेटअप
एप्लिकेशन साधारण HTTP पर SVG और PNG सर्व करता है। छवियाँ ब्राउज़र में सीधे लोड हो जाती हैं, लेकिन VS Code के Markdown प्रीव्यू में 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 पूर्वावलोकन में छवियाँ क्यों गायब हो जाती हैं
VS Code का Markdown प्रीव्यू कड़े सुरक्षा डिफॉल्ट्स के साथ चलता है। यह उन नेटवर्क संसाधनों को ब्लॉक कर देता है जो https पर सर्व नहीं होते। यही कारण है कि ब्राउज़र में परीक्षण सफल रहता है, लेकिन प्रीव्यू चुपचाप आपकी http छवियों को लोड करने से मना कर देता है।
सुरक्षा कारणों से, VS Code Markdown प्रीव्यू में दिखने वाली सामग्री पर पाबंदियाँ लगाता है। इसमें स्क्रिप्ट निष्पादन को निष्क्रिय करना और केवल https के जरिए संसाधनों को लोड होने देना शामिल है।
सामग्री ब्लॉक होने पर प्रीव्यू कोने में एक चेतावनी दिखाता है। GitHub या shields.io जैसे स्रोतों से आने वाली बाहरी एसेट्स ठीक दिखाई देती हैं क्योंकि वे https पर सर्व होती हैं।
इसे काम कराने के लिए क्या बदलें
यदि आपको VS Code प्रीव्यू में http के जरिए छवियाँ लोड करनी हों, तो अंतर्निहित सेटिंग से यह प्रतिबंध ढीला करें। कमांड Markdown: Change preview security settings चलाएँ और Allow insecure content चुनें। इससे स्क्रिप्ट्स बंद ही रहती हैं, पर http पर सामग्री लोड हो सकती है।
सुरक्षा प्रभावों को देखते हुए, इसे अस्थायी रूप से सक्षम करना समझदारी है — या बेहतर है कि वही एसेट्स https पर होस्ट कर दें।
आपके Flask सर्वर के बारे में इसका क्या संकेत है
क्योंकि छवि वाले URL ब्राउज़र में सही खुल रहे हैं, इसका मतलब विकास चरण के लिए Flask ऐप फाइलें अपेक्षित रूप से सर्व कर रहा है। समस्या रूटिंग या MIME हैंडलिंग में नहीं है; डिफॉल्ट रूप से प्रीव्यू सैंडबॉक्स https-only लागू कर रहा है। प्रोडक्शन में आम तौर पर Flask को किसी अलग, सख्त HTTP सर्वर के पीछे रखा जाता है या एसेट्स को CDN से परोसा जाता है; इनमे प्रायः HTTPS सपोर्ट तैयार मिलता है।
रोज़मर्रा के काम के लिए मुख्य बातें
यह सुरक्षा सीमा है, ऐप की बग नहीं। Markdown सिर्फ टेक्स्ट है; उसे रेंडर करने वाला वातावरण तय करता है कि क्या अनुमति है। VS Code का प्रीव्यू सुरक्षा को प्राथमिकता देता है और non-https संसाधनों को ब्लॉक करता है। आप स्पष्ट रूप से इसे ढीला कर सकते हैं: Markdown: Change preview security settings में जाकर Allow insecure content चुनें, या अपनी छवियाँ https पर सर्व करें ताकि वे हर जगह बिना अपवाद के रेंडर हों।
निष्कर्ष
जब स्थानीय Flask सर्वर की छवियाँ ब्राउज़र में लोड होती हैं लेकिन VS Code के Markdown प्रीव्यू में नहीं, तो वजह डिफॉल्ट https-only नीति है। या तो Markdown प्रीव्यू में असुरक्षित सामग्री की अनुमति दें, या छवियों को https पर उपलब्ध कराएँ। यदि आप व्यापक रूप से पढ़ी जाने वाली डॉक्यूमेंटेशन या README तैयार कर रहे हैं, तो निरंतर और सुरक्षित रेंडरिंग के लिए https को प्राथमिकता दें।