☰

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

tag-icon • tag-icon nginx static-content
我需要配置 nginx 中显示的 SVG 图像吗？

我在一个文件夹中有 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 文件一样显示在页面上？

答案1

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

答案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，并可能硬刷新网页以更新浏览器缓存。

相关内容