网站图片成功处理规则（393 案例总结）

适用场景：主站通过 index.php 以 iframe 预览子网页；HTML 与图片都放在 /var/www/jamesband.asia，由 Nginx 通过别名规则提供。

1) 路径策略（关键）

统一使用“站点根相对路径”引用静态资源：例如图片用 /xxx.webp。
避免 ./子目录/… 或 jamesband.asia/… 造成基准路径混乱，尤其在 iframe 预览时。
社交分享图建议用“绝对 URL”（含协议与域名），例如：
- <meta property="og:image" content="https://jamesband.asia/xxx.webp">
可选：为大图添加预加载提升首屏体验：
- <link rel="preload" as="image" href="/xxx.webp">

2) Nginx 规则（已验证可用）

确保 HTML 与静态资源都别名到 /var/www/jamesband.asia：

# HTML 别名（除 index.php/navigation.php 以外）
location ~ ^/(?!index\.php|navigation\.php)(.+\.html)$ {
    alias /var/www/jamesband.asia/$1;
}

# 根路径静态资源别名（图片/样式/脚本/字体）
location ~* ^/(.+\.(?:png|jpe?g|webp|gif|svg|ico|css|js|woff2?|ttf|otf))$ {
    alias /var/www/jamesband.asia/$1;
    access_log off;
    expires 7d;
    add_header Cache-Control "public";
}

说明：主站 root /var/www/html 提供导航与预览；若无以上别名，iframe 内引用 /xxx.webp 会落到主站根目录，可能 404。

3) 预览与导航兼容

主站 index.php 使用 iframe 预览目标 HTML；navigation.php 生成指向 https://jamesband.asia/文件名.html 的链接。
因此，子页内资源统一用“根相对路径”即可在直开与 iframe 预览两种场景下均正常加载。

4) 缓存与强刷（Service Worker 已启用）

sw.js 会为同域图片自动追加 ?v=VERSION，降低旧缓存命中概率。
需要立即全站刷新图片时：
- 修改 sw.js 中的 VERSION，然后强制刷新或重新访问；
- 或临时在图片 URL 追加 ?v=时间戳；
- 或使用浏览器“强制刷新/无痕模式”。

5) 权限与位置

文件放置：/var/www/jamesband.asia/。
建议权限：文件 644，目录 755。
快速校验：
- ls -la /var/www/jamesband.asia/文件.webp
- 访问日志：grep -n "文件.webp" /var/log/nginx/access.log

6) 最小可用示例（片段）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>示例页</title>
  <meta name="description" content="描述文案">
  <meta property="og:title" content="示例页">
  <meta property="og:description" content="描述文案">
  <meta property="og:image" content="https://jamesband.asia/xxx.webp">
  <link rel="preload" as="image" href="/xxx.webp">
</head>
<body>
  <img src="/xxx.webp" alt="示例图片" style="max-width:100%;height:auto;" />
</body>
</html>

7) 排错清单

图片 404：检查是否使用了根相对路径；确认 Nginx 静态别名段存在且已 reload。
预览不显示：检查 iframe 里资源是否仍指向错误基准；统一改为 /… 根路径。
刷新不生效：更新 sw.js 的 VERSION 或追加 ?v= 参数，或强制刷新。

—— 本规范来自“393.傅立叶变换的可视化”上线与预览验证的实战整理。