You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Jupyter Markdown单元格图片在VS Code中无法渲染的问题求助

解决VS Code中Jupyter Notebook Markdown图片无法渲染的问题

我之前帮不少开发者排查过类似的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,比如![title](C:/your-project-path/notebooks/images/grad_summary.png),如果能正常显示,说明问题确实出在相对路径的解析上,再回到前面的方法调整相对路径配置。

内容的提问来源于stack exchange,提问作者Bill

火山引擎 最新活动