我需要配置在 nginx 中显示的 SVG 图像吗？

Question

我在一个文件夹中有 SVG 图像，还有一个 PNG 文件，以确保这些图像显示在页面上。

我的 nginx 配置基本上是这样的：

server {
    listen 80;

    location / {
        root www;
    }

}

图像在www/images文件夹中。

我在页面中看到的结构相同：

<img src="images/logo.svg">
<img src="images/logo.png">

PNG 文件按预期显示在页面上，但不是 SVG。不过，它显示在浏览器代码 200 的网络选项卡中，但正文为空。

当我尝试直接打开它时，例如http://localhost/images/logo.svg，它只是将其下载为文件。

我是否需要添加一些特殊的配置来使 SVG 文件可以在像 PNG/JPG 文件这样的页面上显示？

Answer 1

将 SVG 添加image/svg+xml svg svgz;到您的 mime 类型中/etc/nginx/mime.types并重新加载您的 Nginx。

Answer 2

当 Nginx 无法识别.svg文件的 MIME 类型时，它会为它们提供内容类型标头，content-type: text/plain并且您的浏览器可能无法呈现它们或可能会向 Web 控制台发出警告。

1. 确保/etc/nginx/mime.types为 svg 图像定义 mime 类型：

   types {
     ...
     image/svg+xml   svg svgz;
     ...
   }
   

2. 确保在 http 块中/etc/nginx/nginx.conf包含该mime.types文件：

   http {
     include mime.types;
     ...
   }
   

3. 在终端中检查您的新 nginx 配置是否没有错误：

   sudo nginx -t
   

4. 重新启动 NGINX 以使更改生效

   sudo systemctl restart nginx   // e.g.: ubuntu
   

5. 在网络标题下的浏览器开发工具中，检查 svg 文件是否与标题一起提供，Content-Type: image/svg+xml并可能硬刷新您的网页以更新浏览器缓存。