网站图片上传成功却显示不出来？从文件路径到WebP响应逐项排查

后台提示“上传成功”，前台却出现破图或空白，说明文件写入与网页读取之间还有一段链路没有打通。可能是数据库存了错误路径，也可能是文件在错误目录、访问权限不足、服务器返回了404或错误的文件类型。不要急着重新压缩或改图片尺寸；先用浏览器直接打开图片网址，通常能更快定位问题。

第一步：核对数据库地址与真实文件

复制前台图片的完整URL，检查大小写、扩展名、目录层级和是否多了域名或斜杠。以常见配置为例，网页引用/upload/a.webp时，服务器实际查找位置取决于站点的root或alias规则，并不一定等于后台显示的相对目录。Nginx官方文档解释了两类规则如何拼接文件路径。若后台将文件传到临时目录，却把正式目录写进数据库，网页当然找不到。

第二步：看网络响应，而非只看页面外观

在浏览器开发者工具中查看图片请求。404通常表示路径不对应或文件未进入对外目录；403常见于目录或文件权限限制；200但无法解码，则要看响应体是否其实是HTML错误页、图片内容是否损坏、扩展名与实际格式是否一致。WebP应以匹配的图片内容和正确的媒体类型返回。若URL经CDN或代理，还要比较源站文件与缓存版本。本站的图片变形与裁切排查适用于已经成功加载却显示异常的下一阶段。

第三步：确认页面引用与搜索发现路径

封面字段、正文中的img src和列表缩略图可能来自不同字段。只修正一个位置，另一处仍会破图。Google的图片建议也强调使用标准img元素、可发现的src地址和与实际格式相符的扩展名。需要同时抽查电脑和手机端，并与图片清晰度及加载速度清单一起验收。

1. 记录数据库里保存的图片路径和服务器上的实际文件名。
2. 直接请求图片URL，核对状态码、媒体类型与字节内容。
3. 检查封面、正文、列表三个位置是否使用同一正确地址。
4. 清理或更新缓存后再用手机和无痕窗口复测。

若图片是发布新闻时新增的，尤其要把“文件可访问”放在“文章入库”之前验证；否则会出现文章已经公开而封面仍是空白。关于内容更新流程，可参考静态首页生成后的验收步骤。

资料依据：Nginx路径映射文档；Google图片搜索最佳做法。