双击HTML文件看不到图，主因是图片未随HTML一并导出；Photoshop需选“HTML和图像”而非“仅限HTML”，确保生成images文件夹且路径匹配，再用本地服务器（如Live Server）打开而非双击。
直接双击打开 HTML 文件却看不到图，大概率不是代码写错了，而是图片压根没跟着一起保存出来——仅限HTML 格式只生成一个空壳文件，所有图片资源全丢了。
用 Photoshop 存 HTML 时必须选 HTML 和图像
Photoshop 的「存储为 Web 所用格式」里有两个关键选项：
-
仅限HTML：只生成一个 .html 文件，不导出任何图片，浏览器加载时自然 404 -
HTML 和图像：同时生成 .html +images/文件夹，所有切片或优化后的图都放进去
选错就白忙活。保存后务必检查桌面（或目标目录）是否多出了一个 images 文件夹，里面有没有对应命名的图片文件。没有？重存，别跳过这步。
src 路径必须匹配实际文件结构
Photoshop 自动生成的 HTML 里，<img src="images/slice_01.png" alt="网页HTML源码保存后图片不显示怎么办？资源同步保存" > 这类路径是硬编码的，它依赖两个前提：
立即学习“前端免费学习笔记（深入）”；
- HTML 文件和
images/文件夹在同一级目录下 -
images/文件夹里真有那个文件，且大小写完全一致（比如logo.PNG≠logo.png）
如果手动挪动过 HTML 或图片文件，或者改过文件夹名，路径立刻失效。别猜，直接右键 →「在文件管理器中打开」，确认当前 HTML 所在位置，再看 images/ 是否紧挨着它。
别双击 HTML，用本地服务器打开
直接双击 HTML 文件走的是 file:// 协议，Chrome、Edge 等现代浏览器会主动拦截相对路径下的图片请求，控制台报 net::ERR_FILE_NOT_FOUND 或干脆静默失败。
- 临时解决：命令行运行
python3 -m http.server 8000，然后访问http://localhost:8000/your-page.html - 长期开发：VS Code 装 Live Server 插件，右键 →「Open with Live Server」
只要看到地址栏是 http:// 开头，路径解析才按标准来；file:// 下的一切路径行为都不稳定，别信它。
切片导出后图片尺寸错乱或显示异常
用切片工具切完再存 HTML，Photoshop 会把每块切片单独导出为图，并在 HTML 中用绝对定位拼回去。常见翻车点：
- 切片命名含中文或空格 → 导出后文件名被转义或截断，
src找不到原文件 - 切片区域太小（比如只有 1×1 像素）→ 某些浏览器渲染异常，显示为灰块或空白
- HTML 中用了
table布局拼图 → 表格单元格默认有border-collapse: separate，可能多出 1px 间隙
切片前先统一用英文命名，导出后手动打开 images/ 文件夹核对文件名；若布局错位，优先检查 HTML 源码里 <td> 的 <code>width/height 是否和切片尺寸一致，而不是调 CSS。
最常被忽略的一点：Photoshop 导出的 HTML 是静态快照，不带响应式逻辑。如果图片在缩放后变形或错位，不是路径问题，是它本来就不支持自适应——别指望靠改 src 解决，得重切或换方案。
