HTML网页图片本地可显示浏览器无法加载问题咨询

路径正确性校验 #

根据你给出的目录结构：desktop/website/l22/下存放index.html、style.css和images文件夹，第一种写法<img src="images/research.png" alt="img">是符合本地结构的正确相对路径，第二种写法<img src="../l22.github.io/images/stats.png" alt="img">存在明显错误：index.html的上级目录是website文件夹，不存在l22.github.io目录，该写法天然无效。

常见问题原因 #

• 部署目录不匹配：上传到服务器时未完整上传images文件夹，或者目录层级和本地不一致，比如将index.html上传到了l22文件夹的上级目录，导致相对路径无法命中目标文件
• 大小写不匹配：本地Windows/macOS系统对文件名大小写不敏感，若线上服务器为Linux系统，会严格区分大小写，比如本地文件夹名是Images、线上是images，或者图片文件名大小写和代码中写法不一致，就会出现404错误
• 文件权限不足：线上服务器中images文件夹或内部图片文件没有读取权限，会返回403禁止访问错误
• 请求被拦截：
  • 浏览器广告拦截、隐私类插件会拦截特定来源的图片请求，包括Unsplash外链
  • 本地网络规则、服务器安全策略拦截了图片资源的请求
• 协议不兼容：如果本地是用http协议的本地服务预览（比如VSCode Live Server）正常，部署后站点是https协议，但图片外链是http协议，会被浏览器的混合内容策略拦截

解决步骤 #

1. 确认部署后目录结构、所有文件夹和文件的大小写，和本地完全一致，images文件夹与index.html存放在同一级目录
2. 打开浏览器开发者工具（按F12），切换到「网络」面板后刷新页面，找到图片对应的请求，根据状态码定位问题：
   • 404状态码：核对请求路径和文件实际存放路径是否匹配
   • 403状态码：修改服务器上图片文件权限为644、文件夹权限为755即可
   • 混合内容/跨域报错：将外链图片转存到自己的站点目录下，使用相对路径引用
3. 排查浏览器插件、本地网络规则，临时禁用拦截类插件测试加载情况

内容的提问来源于stack exchange，提问作者L.Bar5522