Skip to content

图片损坏

快速摘要

浏览器请求图片时失败了——可能是路径错、文件不存在、权限不对，或服务器返回了错误。

为什么发生

  • src 属性的路径写错，或文件被移动/删除了

  • 图片文件名大小写不匹配（在 Linux 服务器上大小写敏感）

  • 服务器对该图片返回 403 或 500，没有真正把图片发出来

  • 跨域加载图片时被 CORS 策略阻止

最小示例

✗ 错误代码
<img src="/images/Profile.jpeg" alt="头像">
✓ 修复代码
<img src="/images/profile.jpeg" alt="头像">

Linux 服务器上文件名大小写敏感，Profile.jpeg 和 profile.jpeg 是两个文件。改成实际文件名即可。

如何诊断

  • 在浏览器开发者工具的 Network 面板查看图片请求的状态码

  • 在地址栏直接打开图片 URL，确认是否能单独访问

  • 检查 HTML 中 src 路径与实际文件位置是否一致

如何修复

  • 修正 src 路径，使用相对路径或正确的绝对路径

  • 把文件名大小写与服务器上的实际文件对齐

  • 为 img 加上 alt 属性，加载失败时至少显示文字说明

如何预防

  • 使用构建工具（Vite、Astro）管理资源路径，避免手写相对路径

  • 对用户上传的图片做存在性校验和 CDN 加速

相关资源

相关术语

相关课程

相关练习

相关工具

← 返回语言