网页png图片无法显示

图片挂了。网页页面上本该出现 logo 的片无位置只剩一个灰色边框，或者干脆是法显一块空白。F12 打开控制台，网页Network 面板里一条红色的片无 404 格外扎眼——路径没错，文件名也对，法显服务器上确实有这个文件。网页这种事我遇到过不下十次，片无每次原因都不太一样。法显

最常见的网页一种：文件确实存在，但服务器返回的片无 Content-Type 不对。有些后端框架在处理静态资源时，法显如果 MIME 类型映射表里没有 .png 这一项，网页就会默认吐一个 application/octet-stream 出来。片无浏览器拿到这个头，法显不会把它当图片渲染，而是当成二进制流。你右键查看图片信息，会发现它被识别成了“文件”而非“图像”。解决办法不复杂，在 Nginx 的 mime.types 里确认 image/png png; 这行没被注释掉就行。Apache 的话检查 AddType image/png .png 是否生效。

还有一种情况更隐蔽：路径里带了中文或空格。比如 /images/产品图.png，在本地 Windows 环境跑得好好的，一部署到 Linux 服务器就 404。原因是 URL 编码不一致，浏览器把中文转成了 %E4%BA%A7%E5%93%81%E5%9B%BE，但服务器端的解码逻辑没跟上。我自己的习惯是，图片文件名一律用英文小写加连字符，从源头掐掉这类问题。

大小写也是个坑。macOS 的文件系统默认不区分大小写，Logo.png 和 logo.png 能指向同一个文件。但 Linux 区分。你在 Mac 上开发时引用 src="Logo.png"，文件实际叫 logo.png，本地预览正常，上线就炸。这种错误排查起来最气人，因为肉眼盯着代码看半天，觉得哪哪都对。

缓存问题也值得一提。有时候图片路径换了，新文件也传上去了，但浏览器死活加载的是旧图或者直接报错。强刷（Ctrl+Shift+R）能解决大部分，但如果 CDN 那边有缓存，就得去刷新对应的 URL。我一般会在图片 URL 后面加个查询参数，比如 ?v=20240115，版本号一变，缓存自然失效。

最后说一个前端层面的：img 标签的 src 写成了相对路径，但页面本身是通过路由跳转过来的。./images/a.png 和 /images/a.png 在不同层级的 URL 下解析结果完全不同。SPA 应用里尤其容易踩这个雷。用绝对路径，或者通过构建工具处理资源引用，能省掉很多麻烦。

图片显示不出来，原因往往不在图片本身。路径、MIME、编码、大小写、缓存、相对绝对路径——挨个过一遍，总能找到那个环节出了问题。