如何使用名称中的空间以WebP格式提供图片？

Question

我试图找到有关如何做我需要的事情的信息 - 但令我惊讶的是，什么也没有，所以我在这里写下来。

任务

将所有图像转换为 .webp 格式并用它们替换原始图像。

我做了什么

将所有图像转换为 .webp 并将它们放在原始图像附近：

- assets/img/img.png
- assets/img/img.webp
- ...

添加了 nginx 的规则。

# in http section
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}

# in server section
location ~* ^(/.+)\.(png|jpe?g)$ {
    set $img_path $1;
    add_header Vary Accept;
    try_files $img_path$webp_ext $uri =404;
}

它适用于名称中不带空格的图像，例如 img.png，

但不适用于 img space.png 这样的图像

它在网络面板中的外观

---

我如何提供它？

PS 我尝试过这在 Apache 上并且对于具有此 .htaccess 规则的两个图像，它的工作：

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if browser supports WebP images
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if WebP replacement image exists
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Serve WebP image instead
  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>

<IfModule mod_headers.c>
  # Vary: Accept for all the requests to jpeg, png and gif
  Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

Answer 1

$ uri具有20％解码，而$ img_path则没有。
重写应该在这里有所帮助：

location ~ ^(?<basename>.*)\.(?<extension>png|jpe?g)$ {
rewrite .* $basename break;
try_files $uri.webp $uri.$extension =404;
}

随着更改以说明“ http_accept”