如何修改WordOps环境Nginx规则适配不支持AVIF的浏览器？

1. 配置全局map规则 #

首先找到Nginx主配置文件/etc/nginx/nginx.conf，在http块内添加以下两条map规则（不要放在server或location块中，否则会直接报错，这是绝大多数配置报错的核心原因）：

map $http_accept $webp_suffix {
    default        "";
    "~image/webp"  ".webp";
}
map $http_accept $avif_suffix {
    default        "";
    "~image/avif"  ".avif";
}

这段规则会自动根据浏览器请求的Accept头判断支持的图片格式，只有浏览器明确支持对应格式时，后缀变量才会赋值，否则为空。

2. 修改wpcommon-php74.conf中的站点规则 #

替换你原来的wp-content/uploads相关location配置为以下内容：

# webp/avif rewrite rules for jpg and png images
location /wp-content/uploads {
    location ~ \.(png|jpe?g)$ {
        # 需同时Vary Accept和Accept-Encoding，避免CDN缓存错乱
        add_header Vary "Accept, Accept-Encoding";
        more_set_headers 'Access-Control-Allow-Origin : *';
        more_set_headers  "Cache-Control : public, no-transform";
        access_log off;
        log_not_found off;
        expires max;
        # 匹配顺序：优先avif，其次webp，最后回退原格式
        try_files $uri$avif_suffix $uri$webp_suffix $uri =404;
    }
}

3. 验证配置生效 #

修改完成后执行nginx -t测试配置语法，返回success无报错后，执行systemctl reload nginx重载配置即可。
规则生效后，不支持AVIF的Edge、Safari浏览器访问时，$avif_suffix会自动为空，Nginx会直接跳过AVIF格式查找，自动加载WebP或原JPG/PNG格式，不会出现空白问题。

内容的提问来源于stack exchange，提问作者newbieonline