内容摘要：图片不显示，十有八九是路径写错了。上周帮朋友看一个企业站，首页轮播图全部裂开，浏览器控制台一片红，404 刷屏。他把图片放在 images/banner1.jpg，但 HTML 里写的是 /image

图片不显示，网站十有八九是打开到图路径写错了。上周帮朋友看一个企业站，片设首页轮播图全部裂开，网站浏览器控制台一片红，打开到图404 刷屏。片设他把图片放在 images/banner1.jpg，网站但 HTML 里写的打开到图是 /images/banner1.jpg——多了一个斜杠，服务器根目录下根本没有这个文件夹。片设改回来，网站秒好。打开到图

路径问题分两种。片设相对路径和绝对路径，网站搞混了就容易出事。打开到图相对路径是片设相对于当前 HTML 文件的位置，比如 ./pic.jpg 或 ../img/pic.jpg；绝对路径从域名根目录算起，比如 /static/pic.jpg。本地测试用相对路径没问题，一上传服务器就挂，多半是目录结构变了。我自己的习惯是：小项目用相对路径，大项目统一用根路径，省得算层级算到头大。

文件名大小写也是个坑。Windows 服务器不区分大小写，Linux 服务器区分。你在本地写 Logo.png，服务器上文件叫 logo.png，Windows 下正常显示，传到 Linux 就 404。这种问题最气人，因为本地怎么测都没毛病。解决办法就一个：统一用小写字母加下划线或短横线，别用中文和空格。

再说权限。图片文件在服务器上得有可读权限，一般是 644。文件夹得有可执行权限，一般是 755。有次一个客户说图片全挂，我登上去一看，图片文件夹权限是 600，连 owner 都读不了。改完权限，图片全回来了。命令很简单：chmod 644 *.jpg，chmod 755 images。

如果路径和权限都没问题，那就看图片本身。文件是不是真的存在？有没有上传完整？FTP 传一半断线，文件大小是 0 字节，这种也常见。还有图片格式，浏览器支持 jpg、png、gif、webp、svg，但如果你把 psd 直接改名成 jpg，那肯定不行。我见过有人把 .bmp 改成 .jpg 就往上放，浏览器直接不认。

CDN 和缓存也会捣乱。图片走 CDN 加速，源站更新了图片，CDN 节点还是旧缓存，甚至缓存了一个 404 响应。这时候强制刷新 CDN 缓存，或者给图片 URL 加个版本号，比如 pic.jpg?v=2，问题就解决了。浏览器缓存同理，Ctrl+F5 强刷试试。

HTTPS 页面引用 HTTP 图片，浏览器会直接拦截。这叫混合内容问题。控制台会报 “Mixed Content” 错误。解决办法：图片链接改成 HTTPS，或者用协议相对路径 //example.com/pic.jpg。现在大部分网站都上 HTTPS 了，这个坑踩的人少了，但老站迁移时经常遇到。

服务器配置里有个 hotlink protection，也就是防盗链。如果没把自家域名加白名单，图片也会不显示。尤其是用了 Nginx 或 Apache 的防盗链规则，Referer 不对就返回 403。检查一下 .htaccess 或 Nginx 配置里的 valid_referers。

最后说个前端框架的坑。Vue 或 React 项目里，图片路径要用 require 或 import 引入，直接写字符串路径，打包后路径可能不对。Vite 项目里静态资源放 public 目录，引用时用 /pic.jpg，放 src/assets 里就得用 import。搞混了，开发环境正常，打包后图片全丢。

排查顺序建议这样：打开浏览器 F12，看 Network 面板里图片请求的状态码。404 是路径或文件问题，403 是权限或防盗链，500 是服务器错误，200 但显示裂图，那就是图片文件损坏或格式不对。按这个线索走，基本十分钟内能定位。