讲师中心 微信公众号
AI工具推荐 视频效率加速

Sublime Text 4解决Markdown预览图片不显示问题

雨伟小哥_2384

雨伟小哥_2384

发布时间:2026-05-20 12:29:45

|

838人浏览过

|

来源于php中文网

原创

Markdown Preview图片显示红叉或空白并非插件故障,而是因浏览器安全策略拦截file://协议下的本地图片请求;需启用http_server配置,通过http://127.0.0.1:8080服务代理加载,配合纯相对路径(如./images/logo.png)方可正常显示。

sublime text 4解决markdown预览图片不显示问题

为什么 MarkdownPreview 里图片显示为红叉或空白

不是插件坏了,是 Sublime 没把图片路径当“可加载资源”处理。MarkdownPreview 生成的 HTML 默认走 file:// 协议直接打开,而现代浏览器(Chrome、Edge、Safari)会拦截本地文件中的相对路径图片请求,报 CORS 或 Not allowed to load local resource 错误。

常见现象包括:![](images/logo.png) 渲染后是断链图标、控制台报 net::ERR_FILE_NOT_FOUND、预览页右键图片地址显示 file:///.../images/logo.png 但打不开。

  • 必须用 HTTP 服务代理加载,不能双击 HTML 文件或直接用 file:// 打开
  • 路径必须是相对于 .md 文件的**纯相对路径**,禁止以 / 开头或含 file://
  • 避免中文路径、空格路径(如 C:\我的文档\readme.md),Windows 下极易失败
  • 不要依赖“保存即刷新”——enable_autoreload 只对已打开的预览页生效,首次仍需手动触发

怎么配出能加载图片的预览流程

核心是让 MarkdownPreview 启动一个本地 HTTP 服务,把临时 HTML 和图片都通过 http://127.0.0.1:8080/... 提供,绕过浏览器的安全限制。

打开 Preferences → Package Settings → Markdown Preview → Settings,写入以下最小必要配置:

Markdown Viewer
Markdown Viewer

用于 AI 配对编辑的实时 Markdown 查看器,协作时更新即时渲染,支持任意 AI 代理和网页浏览器。

下载
{
    "enable_autoreload": true,
    "html_preview": true,
    "parser": "mistune",
    "markdown_extensions": ["tables", "fenced_code", "footnotes"],
    "http_server": true,
    "enable_math": false
}
  • "http_server": true 是关键开关,启用内置 Python HTTP 服务(Sublime 自带 Python ≥3.6 即可,无需额外安装)
  • "parser": "mistune" 比默认 markdown 更可靠,原生支持表格、任务列表,且不依赖 Pygments
  • 删掉 codehilite 扩展项——它强制要求 Pygments,而 Sublime 自带 Python 几乎都不带它,留着反而导致解析中断、图片区域空白
  • 确保 "html_preview": true,否则插件可能退化为纯文本输出

图片路径怎么写才有效

路径不是“能不能找到文件”的问题,而是“浏览器是否被允许加载它”的问题。一切必须围绕 http_server 模式设计。

  • 正确示例:![](images/logo.png)、![](./assets/chart.svg)、![](../common/icon.jpg)
  • 错误写法:![](C:\project\images\logo.png)(绝对路径)、![](file:///C:/project/images/logo.png)(协议显式)、![](/images/logo.png)(根路径,服务器不映射)
  • 图片文件必须和 .md 文件在同一个磁盘卷(Windows 下不能跨盘符),否则 HTTP 服务无法代理访问
  • 如果图片在子目录,.md 文件也建议放在同级或父级目录——http_server 只暴露当前工作区根目录及子目录

验证和排查顺序不能乱

别一上来就改设置。按这个顺序快速定位卡点:

  • 先确认右下角状态栏显示 Markdown,不是 Plain Text;点它 → Set Syntax → Markdown (GitHub flavored)
  • 保存文件,后缀必须是 .md;未保存的 untitled 标签页不触发预览
  • 按 Ctrl+Shift+P 输入 Markdown Preview: Preview in Browser,**不要点菜单或快捷键**(默认无绑定)
  • 看浏览器地址栏:如果是 http://127.0.0.1:8080/... 开头,说明 http_server 生效;若是 file:///,说明配置没生效或插件没重载
  • 打开浏览器开发者工具(F12),切到 Network 标签,刷新页面,看图片请求是否返回 200 —— 如果是 404,就是路径错了;如果是 blocked,说明还在走 file://

最易被忽略的是:改完配置后没重启 Sublime Text。Settings 修改只在新启动实例中加载,旧窗口不会热更新。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

相关专题

更多
OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

60

2026.10.16

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

20

2026.10.16

OpenJDK怎么部署Java应用
OpenJDK怎么部署Java应用

Java项目开发完成后,怎样部署到目标环境并正常运行?本专题介绍OpenJDK应用部署流程,涵盖运行环境准备、版本兼容检查、应用打包、启动参数配置和日志查看,帮助你理清部署前后的操作顺序,减少环境差异造成的运行问题。

20

2026.10.16

Revel框架模板渲染与表单验证
Revel框架模板渲染与表单验证

本专题围绕Revel框架视图层开发,介绍模板语法、变量输出、布局复用、表单提交、参数绑定与验证规则,帮助开发者完成安全规范的页面交互。

20

2026.10.16

Revel框架MVC路由与控制器
Revel框架MVC路由与控制器

本专题聚焦Revel框架MVC核心机制,讲解路由定义、控制器Action、参数绑定、请求响应和反向路由,并结合常见场景梳理接口请求处理流程。

20

2026.10.16

Revel框架入门与安装配置
Revel框架入门与安装配置

本专题从Revel框架环境搭建讲起,系统介绍命令行工具安装、项目创建、目录结构、配置文件及热代码重载,帮助开发者快速完成首个Go Web应用。

20

2026.10.16

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

40

2026.10.15

MySQL 忘记密码怎么办
MySQL 忘记密码怎么办

MySQL忘记密码专题汇集不同版本与系统下的root密码重置方法,覆盖MySQL 5.7、8.0、Mac、Linux及本地集成环境,并提示恢复权限与重新登录的检查步骤。

20

2026.10.15

Vue.js 中 ref 和 reactive 的区别
Vue.js 中 ref 和 reactive 的区别

Vue.js中ref和reactive的区别专题汇集两种响应式API的定义、访问方式、对象解构、侦听与性能取舍等文章,帮助结合实际状态类型选择合适写法。

20

2026.10.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn