企业官网建设流程全解析

这张截图非常关键，它直接揭示了问题的真相！🕵️‍♂️

核心发现：请求根本没到 Nginx 图片服务器

请看截图中的两个致命细节：

1. 请求的 URL 路径不对

   • 你期望的请求：http://.../goods-img/00a5036a...jpg（应该包含/goods-img/前缀）。
   • 实际的请求：http://47.97.59.142:28089/00a5036a-07d3-4131-b677-956312bbbc2c.jpg。
   • 结论：前端代码直接把数据库里的文件名拼到了根目录下，完全丢失了/goods-img/这个路径前缀。Nginx 找不到这个规则，自然就返回 404。

2. 响应的 Content-Type 是 JSON

   • 截图显示：Content-Type: application/json。
   • 分析：这说明拦截这个请求的不是你的 Nginx 静态文件服务器，而是一个后端 API 服务（比如 Java/Go/Node.js 写的接口）。
   • 推测：你的后端服务可能有一个全局异常处理机制，当它收到一个它无法识别的路由（比如直接访问图片文件名）时，它没有转发给 Nginx，而是直接返回了一个 JSON 格式的 "404 Not Found" 错误对象。

🛠️ 解决方案

既然 Nginx 配置和 Docker 挂载都已经验证无误，现在只需要修正前端的调用方式。

方案 A：修改前端代码（推荐）

找到前端项目中拼接图片 URL 的代码位置。通常是在 Vue/React 组件或者工具函数里。

• 错误写法（当前）：

  // 假设 imgUrl 是从后台拿到的文件名 let fullUrl = baseUrl + imgUrl; // 结果变成了 http://ip:port/文件名.jpg

• 正确写法（修改后）：

  // 必须手动加上 Nginx 配置的 location 前缀 let fullUrl = baseUrl + '/goods-img/' + imgUrl; // 结果变成 http://ip:port/goods-img/文件名.jpg

方案 B：修改 Nginx 配置（不推荐，但可行）

如果你不想改前端代码，想让 Nginx 兼容这种“不带前缀”的请求，可以在 Nginx 配置里加一个兜底规则（但这可能会误伤其他 API 请求，需谨慎）：

# 在 server 块中添加，注意要放在其他 location 之后 location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { alias /etc/nginx/img/upload/; expires 30d; }

建议优先使用方案 A，保持 URL 结构的规范性。快去检查前端代码吧，加上/goods-img/就能显示了！