VSCode资源管理器面板添加图片：本地图片导入及使用求助

一、将图片加入项目文件夹 #

• 找到本地的图片文件，直接复制/剪切
• 打开VSCode左侧「资源管理器」，找到目标项目文件夹，右键选择「粘贴」，或者直接把图片拖进这个文件夹
• 完成后就能在资源管理器里对图片进行复制、转移等操作

二、在代码中插入图片 #

以HTML为例，先理清你的项目结构，比如：

项目根目录/
├─ index.html
└─ img/
   └─ demo.png

• 用相对路径引用图片：

<img src="./img/demo.png" alt="图片说明">

• 如果图片和代码文件在同一目录，直接写文件名即可：

<img src="demo.png" alt="图片说明">

三、解决仅显示替代文本的问题 #

• 核对路径：确保src里的路径和图片实际位置完全匹配，注意Linux/macOS系统区分文件名大小写
• 检查图片完整性：双击本地图片确认能正常打开，排除文件损坏问题
• 预览时用本地浏览器：右键代码文件选择「在默认浏览器中打开」，比VSCode内置预览更准确

内容的提问来源于stack exchange，提问作者Rae Ann M. Garrett