开发网站图片展示页时HTML仅加载单张图片，求排查解决建议

已定位的问题点 #

• 本地绝对路径不适用网站场景：代码里写的C盘完整文件路径，仅能在你本机打开html文件时临时访问，浏览器出于安全沙箱规则，对这类带本地磁盘盘符的路径会做严格的访问限制，一旦路径稍有偏差就会直接加载失败；这类路径也完全不具备部署通用性，换个设备、甚至把html文件挪个文件夹位置就会全部失效。
• 路径带不可见无效字符：第二个img标签的路径开头，藏了3个肉眼无法识别的Unicode格式控制字符（是复制路径时带入的格式冗余内容），视觉上和正常路径没有差异，但浏览器解析时会直接将这串路径判定为无效地址，根本找不到对应的图片文件。
• 两张图路径完全重复：两个img标签指向的是同一张boat.jpg文件，就算所有路径都能正常加载，最终展示的也只是同一张图片，达不到多图并排展示的预期效果。

具体修复操作 #

• 统一整理网站资源：在当前html文件的同级目录下新建一个images文件夹，把所有要展示的图片都移入这个文件夹，不要直接引用系统下载目录里的零散文件。
• 替换为标准相对路径：删掉所有src属性里以C:\开头的绝对路径，改成相对路径写法——比如图片存在同级的images文件夹下，路径就写images/boat.jpg；第二个img的路径不要直接复制之前的文本，手动重新敲一遍完整路径，彻底去掉藏在开头的不可见特殊字符。
• 匹配多图对应资源：如果需要展示不同的图片，把第二个img的src替换为对应第二张图片的相对路径，不要和第一张图指向同一个文件。
• 验证加载状态：修改完代码后按F12打开浏览器开发者工具，切换到控制台标签查看资源加载报错，就能快速定位剩余的路径问题。

注意：网站代码里严禁直接写本地磁盘的绝对路径，这类路径只有你自己的电脑能识别，其他访客打开网站时完全找不到对应的图片资源。

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