网页图片加载失败求助：相对路径引用图片异常问题排查

兄弟，先揪出最显眼的问题——你写的<img>标签有语法错误！src属性后面漏了等号，浏览器根本没法正确解析这个属性，这大概率是占位框出现的直接原因。先把代码改成正确格式：

<img src="../img/image.png" alt="图片描述文本">

顺便建议加上alt属性，既符合Web规范，也能在加载失败时给用户明确提示。

接下来，咱们一步步排查其他可能的问题：

• 验证相对路径的逻辑是否正确
  相对路径是基于当前HTML文件的位置来解析的，举个常见的目录结构例子：

  网站根目录/
  ├─ index.html（如果你的页面在这里）
  ├─ img/
  │  └─ image.png
  

  那../img/image.png会往上跳一级，直接跳出根目录，自然找不到图片！正确路径应该是img/image.png。
  你可以右键浏览器里的占位框→「检查」，看控制台的报错信息，里面会显示浏览器实际请求的图片路径，对比你的文件实际位置就能快速定位问题。

• 检查文件名/文件夹名的大小写
  Windows系统不区分大小写，但Kubuntu（Linux）是严格区分的！比如代码里写的img/image.png，实际文件夹叫Img或者文件是Image.png，在Linux下就会加载失败。把代码里的路径和实际文件的大小写统一起来。

• 确认Linux系统下的文件权限
  在Kubuntu中，Web服务器（比如Apache、Nginx）需要有读取图片文件夹和文件的权限。打开终端进入网站根目录，执行以下命令设置合适的权限：

  chmod -R 755 img/
  chmod 644 img/image.png
  

• 检查本地服务器的根目录配置
  如果你用XAMPP、WAMP这类本地服务器运行网站，要确保服务器的根目录指向你的网站文件夹，而不是上级目录。根目录配置错误会导致所有相对路径解析失效。

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