在 vs code 中用 插入本地图片需确保路径相对于 html 文件、使用 live server 启动、图片真实存在且命名准确，并正确填写 alt 属性；常见问题多因路径错误或未启动服务器导致。
在 VS Code 的 HTML 文件里怎么用 <img alt="vscode网页怎么插入一个图片" > 标签插入本地图片
VS Code 本身不渲染网页，它只是编辑器；插入图片的关键是写对 <img alt="vscode网页怎么插入一个图片" > 标签的 src 路径，且图片文件得真实存在、路径能被浏览器正确解析。
常见错误现象：<img src="logo.png" alt="vscode网页怎么插入一个图片" > 写了但页面空白，控制台报 404 Not Found —— 本质是路径错了，不是 VS Code “不支持插图”。
- 路径必须相对于当前 HTML 文件的位置，不是相对于 VS Code 工作区根目录
- 推荐用相对路径（如
./images/logo.png），避免用绝对路径或file://协议（浏览器会因安全策略拒绝加载） - 如果图片和 HTML 在同一目录，直接写
src="logo.png"；如果在子目录assets/下，就写src="assets/logo.png" - 路径区分大小写，
Logo.PNG和logo.png在 macOS/Linux 下是两个文件
为什么用 Live Server 插件而不是直接双击打开 HTML 文件
直接双击 HTML 文件，浏览器地址栏显示的是 file:///...，此时很多相对路径（尤其是含 ../ 的上层引用）会失效，图片、CSS、JS 都可能 404。
jQuery small2big图片缩放插件
下载
jQuery small2big图片缩放插件，兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、head区域引用文件css和js库 2、在文件中加入html代码， 一个li对应一个图片，images文件夹的图片按数字命名 1.jpg, 2.jpg, ...
Live Server 插件起一个本地 HTTP 服务（如 http://127.0.0.1:5500），让浏览器以服务器模式加载资源，路径解析才符合标准 Web 行为。
- 安装插件后，右键 HTML 文件 → “Open with Live Server”
- 确保图片文件已保存到项目中，不要只靠复制粘贴进 VS Code 编辑器窗口（那只是文本，没生成真实文件）
- 如果用了
src="./images/cat.jpg"但提示 404，立刻检查：是否存在./images/cat.jpg这个真实路径？文件名拼写和扩展名是否完全一致？
<img alt="vscode网页怎么插入一个图片" > 标签必须加 alt 属性吗
不是浏览器强制要求，但不加 alt 会导致可访问性问题，而且部分浏览器/屏幕阅读器会把空 alt 当作“该图无文字意义”，而缺失 alt 可能显示成“image”或触发警告。
- 内容型图片（如文章配图）：写简明描述，如
alt="一只橘猫蹲在窗台上" - 装饰型图片（如纯背景分割线）：写空字符串
alt=""，明确告知辅助技术“忽略此图” - 千万别写
alt="图片"或alt="logo"—— 完全没信息量 - VS Code 的 Emmet 输入
img+ Tab 会自动补全<img src="" alt="">，记得填进去
图片路径没问题，但还是不显示？检查这几个点
路径对、服务起了、alt 也写了，仍白屏——大概率是 MIME 类型或文件损坏，而非代码问题。
- 右键图片文件 → “Reveal in Explorer/Finder”，手动双击打开，确认图片能正常查看（排除文件损坏）
- 检查文件扩展名是否真实匹配内容：比如把 PDF 改名成
.png，浏览器无法解码 - 如果用中文路径（如
src="产品图/截图.png"），某些旧版 Live Server 或服务器配置可能编码异常，优先改用英文路径 - 浏览器按
F12打开开发者工具 → Network 标签页，刷新页面，看图片请求的状态码和响应头，Content-Type是否为image/png等合法类型
