我想通过使用下面的代码服务器webp图像支持浏览器。 除了同一文件的.png和.jpg图像之外，我已经有.webp图像。
例如，如果有一个名为vacation.jpg的图像，我也有vacation.jpg.webp。
下面的代码工作，但它是覆盖我的其他位置块之前，我切换到CDN。 现在我正在使用CDN的代码块没有任何效果，没有响应的WEBP图像，也没有覆盖我的其他位置块。
这里是如何做到这一点：
添加到/etc/nginx/mime.types
“image/webp webp” 添加到主要的nginx.conf文件中：
map $http_accept $webp_suffix { default “”; “~*webp” “.webp”; }
添加到服务器块：
location ~* ^/wp-content/.+\.(png|jpg)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; }
重新启动或重新加载nginx。
我的其他位置块的示例：
location ~ .(ico|gif|png|jpe?g|svg|webp)$ { valid_referers none blocked example.com *.example.com; if ($invalid_referer) { return 403; } }
location ~ \.(ico|gif|png|jpe?|svg|webp|eot|otf|ttf|ttc|woff|woff2|ogg|js|css|font.css)$ { add_header Access-Control-Allow-Origin "*"; #gzip_vary on; expires 30d; }
我发布这个答案后，原来的问题完全改变了，这个答案不再是相关的问题。
即使你的意图是好的，当你发现一个.webp版本的时候，你做了一个302redirect的事实，使得增益变小。
redirect会在图片加载时间延迟中添加两个往返延迟，如果图片足够小，则接收.webp版本所需的时间会比原始版本花费更长的时间。
要解决这个问题，你应该直接在网站代码中生成URL。
但是，要回答您当前的问题，您可以使用以下这组规则：
location ~ ^(/wp-content.+)\.(jpe?g|png)$ { set $red Z; if ($http_accept ~* "webp") { set $red A; } if (-f $request_filename.webp) { set $red "${red}B"; } if ($red = "AB") { add_header Vary Accept; return 302 $1.webp; } }
这里的想法是，你已经在你的location指令中捕获了文件名的第一部分。 因此，新位置的第一部分位于$1正则expression式捕获variables中。 所以，只需在return指令中使用$1即可。 我在这里使用return ，因为它比重rewrite要快。