真正能发出去就打开的方案是将图片转为data url内联进html，即用base64编码替换img标签的src路径，使html独立运行不依赖外部文件。
HTML 图片对齐后导出为单文件，为什么直接压缩 .html + 图片文件夹会失效
因为浏览器打开本地 index.html 时，图片路径是相对的（比如 ./images/logo.png），一旦收件人解压后没保持原目录结构，或双击打开路径含空格/中文，img 标签立刻 404。这不是对齐问题，是资源引用方式没固化。
- 绝对路径（
file:///）在别人电脑上完全无效 - 相对路径依赖固定文件夹层级，分享即“裸奔”
- 用
base标签改默认路径？照样跨设备失效
真正能发出去就打开的方案：把图片转成 data URL 内联进 HTML
把 <img src="logo.png"> 换成 <img src="data:image/png;base64,iVBORw0KGgo...%20">，图片二进制直接塞进 HTML，不再依赖外部文件。兼容所有现代浏览器，Chrome/Firefox/Safari/Edge 均支持，且无需服务器。
- 用命令行快速转：
base64 -i logo.png -o logo.b64（macOS/Linux），Windows 可用 PowerShell：[Convert]::ToBase64String((Get-Content logo.png -Encoding Byte)) - 在线工具慎用敏感图——代码里明文可见，别转含用户头像、证件照的图
- 大图（>2MB）会导致 HTML 文件膨胀、加载卡顿，优先压缩图片再转
- 批量处理？写个 Python 脚本遍历
<img>标签并替换，比手动快得多
打包发送前必须检查的三件事
很多人以为“zip 一下发过去”就完事，结果对方打不开。不是格式问题，是细节断链。
- 确认所有
src、href属性已转 data URL 或删掉外链（比如 Google Fonts 的@import、CDN 的 JS） - 删掉开发时用的
console.log、alert()、未注释的调试代码——它们可能报错阻塞渲染 - 测试路径：把整个文件夹拷到桌面，双击
index.html，看是否所有图片、样式、交互正常；不要只在 VS Code Live Server 里测
如果必须保留图片文件（比如超大图、需反复修改）
那就别打包成 zip 发“文件夹”，改用自解压 HTML：用 zip 命令把图片和 HTML 打包成单个 .zip，再写个极简的 loader.html，靠 JS 解压并动态插入图片——但这需要引入 fflate 或 JSZip 库，体积大、兼容性差、移动端易失败。不推荐。
- 更务实的做法：用
7z a -tzip -mx=9 output.zip index.html images/高压缩率打包，附带一份 README.txt，写明“请解压后双击 index.html，勿直接拖入浏览器地址栏” - 微信/QQ 传文件会自动解压重命名，导致路径错乱——务必提醒对方“用系统自带解压工具，解压到空文件夹”
- 邮件附件超 25MB？用
git clone或临时网盘链接更稳，HTML 本身不该承载大资源
最麻烦的从来不是怎么对齐图片，而是怎么让别人点开那一刻，和你本地看到的一模一样。路径、编码、解压习惯、浏览器策略——每个环节都可能无声断掉一根线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
