VS Code项目打包发送解压后CSS引用图片无法加载，本地live server运行正常

核心触发原因 #

• 路径规则不兼容：如果代码中使用/images/xxx.png这类以/开头的根路径引用图片，Live Server运行时会自动以项目根目录作为服务根目录完成解析；但他人解压后直接双击打开HTML走file://本地文件协议时，根路径会默认指向磁盘根目录，完全匹配不到对应图片资源。若你在代码中写了C:\项目\img\xx.png这类本地绝对路径，发给他人后路径对应关系会直接失效。
• 跨系统大小写敏感差异：Windows环境下文件名不区分大小写，代码里写Img/photo.JPG和img/photo.jpg都能被Live Server正常识别；但他人如果使用macOS、Linux系统解压文件，系统默认区分文件名大小写，路径不匹配就会加载失败。
• 特殊字符/后缀不匹配：图片文件名包含中文、空格、emoji等特殊字符时，跨设备解压可能出现编码异常导致路径识别失败；另外代码中写的图片后缀和实际文件后缀不一致（比如实际为.jpeg、代码写.jpg）也会触发加载失败。

修复方案 #

• 全部使用相对路径引用图片：根据HTML文件和图片的层级关系写路径，比如HTML在项目根目录、图片存放在根目录下的img文件夹，就写./img/xxx.png；如果HTML在根目录的page文件夹、图片在根目录的img文件夹，就写../img/xxx.png，禁止使用根路径、本地磁盘绝对路径。
• 统一命名规则：所有图片文件夹、文件名、代码中路径引用全部用小写英文+数字+下划线命名，不要出现特殊字符，确保代码中写的文件名、后缀和实际文件完全一致。
• 打包前提前验证：打包压缩前先关闭Live Server，直接双击HTML文件用浏览器打开，确认所有图片都能正常加载后再打包分发。

内容的提问来源于stack exchange，提问作者caioTrevisan