Jupyter Markdown单元格图片在VS Code中无法渲染的问题求助
我之前帮不少开发者排查过类似的VS Code图片渲染问题,结合你的场景(同conda环境、Jupyter正常但VS Code显示空白),给你几个实用的排查和解决方向:
核对相对路径的基准目录
VS Code的Markdown预览是基于当前打开的工作区根目录解析相对路径的,但Jupyter Notebook是基于自身文件所在的目录来解析。举个例子:如果你的notebook在project/notebooks/文件夹,图片在project/notebooks/images/,Jupyter能直接识别images/grad_summary.png,但如果VS Code打开的是单个notebook文件而非整个工作区,就可能出现路径解析偏差。最简单的验证方法:右键图片文件,选择「复制相对路径」,把这个路径直接替换到Markdown里试试。调整VS Code的Markdown图片根路径设置
打开VS Code设置(快捷键Ctrl+,),搜索markdown.preview.image.localPathRoot,可以把这个值设置为${fileDirname}——这个变量会自动指向当前打开的notebook文件所在的目录,让VS Code和Jupyter用同样的基准路径解析图片。设置完后重启一下预览窗格。检查Jupyter扩展的路径配置
打开命令面板(Ctrl+Shift+P),搜索Preferences: Open Settings (JSON),看看有没有配置jupyter.notebookFileRoot,如果有的话,确保它的值是你的notebook所在的文件夹路径;如果没有,可以手动添加:"jupyter.notebookFileRoot": "${fileDirname}"这个设置会让VS Code的Jupyter环境用当前文件目录作为根路径,和浏览器版Jupyter保持一致。
清除VS Code缓存并重启
有时候缓存会导致渲染异常,按Ctrl+Shift+P打开命令面板,输入Developer: Reload Window重启VS Code;如果还是不行,可以手动删除VS Code的缓存目录(Windows是%APPDATA%\Code\Cache,Mac是~/Library/Caches/Code),再重新打开VS Code试试。用绝对路径做测试
先把图片的绝对路径写进Markdown,比如,如果能正常显示,说明问题确实出在相对路径的解析上,再回到前面的方法调整相对路径配置。
内容的提问来源于stack exchange,提问作者Bill




