沪上十二少入场点图片加载失败或显示异常如何排查？

Question

沪上十二少入场点图片加载失败或显示异常，常见原因为资源路径配置错误或CDN缓存失效。首先检查前端请求URL是否为相对路径（如`/images/entry.jpg`）而未适配部署子路径（如部署在`/sh2024/`下却未配置`publicPath`）；其次验证图片实际存在于静态资源目录且MIME类型正确（Nginx需配置`image/webp`等支持）；再排查CDN是否缓存了404响应或旧版HTML中硬编码的过期URL；最后确认跨域策略（CORS）是否阻断图片加载——尤其当图片托管于独立图床时，需服务端返回`Access-Control-Allow-Origin: *`。建议通过浏览器Network面板定位具体失败请求，结合Status Code、Response Headers及Preview选项卡快速归因。

Answer 1

```html

一、现象层：前端可见异常表现

• 入场点图片区域显示空白、断裂图标（如浏览器默认的“缺失图像”占位符）
• 控制台报错：Failed to load resource: net::ERR_HTTP_RESPONSE_CODE_FAILURE 或 404 (Not Found)
• Network 面板中图片请求状态码为 404、403、502 或 0（跨域拦截/预检失败）
• 部分用户可见、部分不可见（典型 CDN 缓存分片或地域节点差异）

二、路径层：部署上下文与资源定位失配

当应用部署于子路径（如 /sh2024/）时，若构建配置未同步适配，将导致静态资源解析失效：

配置项	错误示例	正确实践
Vite base	base: "/"	base: "/sh2024/"
Vue CLI publicPath	publicPath: "/"	publicPath: "/sh2024/"
Webpack output.publicPath	publicPath: ""	publicPath: "/sh2024/"

相对路径 /images/entry.jpg 在子路径部署下会错误解析为 https://domain.com/images/entry.jpg（而非 https://domain.com/sh2024/images/entry.jpg）。

三、服务层：静态资源交付链路完整性验证

1. 确认文件物理存在：ls -l dist/sh2024/images/entry.jpg（构建后）及 Nginx root 目录映射一致性
2. 检查 MIME 类型响应头：curl -I https://cdn.example.com/images/entry.jpg 应返回 Content-Type: image/webp（非 text/plain 或缺失）
3. Nginx 配置需显式支持现代格式：

location ~* \.(webp|avif|jxl)$ {
  add_header Content-Type image/$1;
  expires 1y;
  add_header Cache-Control "public, immutable";
}

四、分发层：CDN 缓存污染与版本漂移

CDN 可能缓存了以下三类错误响应，造成“顽固性 404”：

• 历史部署中已删除图片的 404 响应（HTTP 状态码被缓存）
• 旧版 HTML 中硬编码的过期 URL（如 /assets/entry-v1.jpg → 新版已重命名为 /assets/entry-v2.jpg）
• 未配置 Cache-Control: no-cache 的 HTML 文档自身被缓存，导致资源引用长期不更新

五、安全层：跨域策略（CORS）阻断深度分析

当图片托管于独立图床（如 https://img.sh2024-cdn.com/entry.jpg）时，需双重校验：

1. 图床服务端必须返回响应头：Access-Control-Allow-Origin: *（或精确域名）
2. 若使用 <img crossorigin="anonymous">，则必须携带 CORS 头，否则 Canvas 操作（如水印、裁剪）将触发 SecurityError
3. 注意：Safari 对 Access-Control-Allow-Origin: * + Credentials 的限制，生产环境建议白名单化

六、诊断流程：Browser DevTools 协同归因法

graph TD
  A[Network 面板筛选 Img] --> B{Status Code?}
  B -->|404| C[检查 URL 构建逻辑 & publicPath]
  B -->|403| D[验证 CDN 权限策略 / Referer 白名单]
  B -->|502| E[回源失败？检查图床可用性与 Nginx proxy_pass]
  B -->|200 + 空白| F[Preview 查看是否为 0-byte / MIME 错误 / 跨域拦截]
  F --> G[Response Headers 查 Access-Control-* / Content-Type]
  F --> H[Preview 标签确认是否为有效图像二进制流]

七、加固建议：面向 SRE 的可运维设计

• 构建阶段注入 ASSET_BASE_URL 环境变量，动态生成资源前缀，避免 hardcode
• CDN 配置强制忽略 404 响应缓存（如 Cloudflare Page Rules 设置 Cache Level: Bypass for 4xx）
• 图片 URL 后追加内容哈希参数（?v=abc123）或采用 content-hash 文件名，实现精准缓存失效
• 建立静态资源健康检查脚本，每日巡检关键入口图 HTTP 状态码、Content-Length、Content-Type

```