【问题标题】：nginx won't serve .svg filesnginx 不会提供 .svg 文件
【发布时间】：2019-07-17 15:30:06
【问题描述】：

我对 nginx 还很陌生，我只是想在我的树莓派 3A+ 上设置一个简单的静态内容示例，但我无法让它提供 svg 文件。在下面的示例中，png 图像显示正常，但 svg 文件都仅显示 alt 文本。我已经查看了文档和我能找到的所有论坛，并且我已经尝试了一切 - 没有运气。我尝试从本地主机和局域网上的另外两台电脑浏览这个 - 结果相同。为什么 nginx 会很好地提供 png 文件而不是 svg？相同的目录、配置、权限等。我测试了 svg 文件 - 它们没有损坏或任何东西。如果我将本地浏览器指向该目录而不通过 nginx，我可以查看它们。

这里是 /etc/nginx/nginx.conf 文件

user pi; 
events{} 

http { 

  server { 
    listen 80; 
    server_name localhost; 
    root /home/pi/DigitalClock/dcvenv; 
    index /static/index.html; 

  location / { 
    autoindex on; 
  } 
  } 
}

/etc/nginx/mime.types 文件中的条目是（我根本没有更改文件）

image/svg+xml svg svgz;

这是我的 /static/index.html

<html> 
<img src="/static/admin/img/pic01.png" alt="Search"></label> 
<img src="/static/admin/img/icon-yes.svg" alt="icon yes"></label> 
<img src="/static/admin/img/search.svg" alt="icon yes"></label> 
<img src="/static/admin/img/sorting-icons-yes.svg" alt="icon yes"></label> 
</html>

所有文件都存在于指定目录中，权限从root开始向下设置为owner=rwx, group=x, other=x

nginx start command: sudo service nginx start

这里是 svg 文件。第一个有效，第二个无效

第一个 svg

<svg width="14" height="84" viewBox="0 0 1792 10752" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="sort">
      <path d="M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45zm0-384q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 4$
    </g>
    <g id="ascending">
      <path d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
    </g>
    <g id="descending">
      <path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
    </g>
  </defs>
  <use xlink:href="#sort" x="0" y="0" fill="#999999" />
  <use xlink:href="#sort" x="0" y="1792" fill="#447e9b" />
  <use xlink:href="#ascending" x="0" y="3584" fill="#999999" />
  <use xlink:href="#ascending" x="0" y="5376" fill="#447e9b" />
  <use xlink:href="#descending" x="0" y="7168" fill="#999999" />
  <use xlink:href="#descending" x="0" y="8960" fill="#447e9b" />
</svg>

第二个 svg - 不起作用

<svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
  <path fill="#555555" d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5$
</svg>

谜团加深

很奇怪。 /img 目录中有 3 个 svg 文件不会呈现（所有其他都可以正常工作）：

search.svg
tooltag-add.svg
icon-yes.svg

这是奇怪的部分。如果您将这些文件重命名为任何其他名称，然后更改 index.html 以引用新名称，它们就可以正常呈现。这些名字有什么奇怪的吗？ nginx 是否以某种方式在其他地方寻找这些名称？这对我来说毫无意义。

我想确保我看到的是我所看到的。 search.svg 不呈现。我将文件名更改为search2.svg，然后在index.html 文件中也进行了更改。工作正常。然后我把它改回 search.svg 两者都不起作用。令人惊讶的是文件名导致了这种情况。有人吗？？？？？？

【问题讨论】：

查看访问日志——浏览器真的请求文件吗？您的 /static/index.html 文件格式不正确 - 我不知道这是否是一个因素。
我刚刚发布了访问日志。似乎其中一个请求得到了 404。
访问日志错误是由于第三个 svg 文件名拼写错误。我纠正了这一点，现在 svg 与 png 一起显示，但不是其他 2 个 svg。
更改后是否清除了浏览器缓存？
谢谢。清除浏览器缓存解决了这个问题。 ctrl F5.

标签： nginx svg static

【解决方案1】：

使用 ctrl f5 清除浏览器缓存解决了这个问题。

【讨论】：

【解决方案2】：

确保您确实在http { ... } 部分中包含mime.types：

include /etc/nginx/mime.types;

那么完整的配置：

user pi; 
events{} 

http { 

  include /etc/nginx/mime.types;

  server { 
    listen 80; 
    server_name localhost; 
    root /home/pi/DigitalClock/dcvenv; 
    index /static/index.html; 

  location / { 
    autoindex on; 
  } 
  } 
}

【讨论】：

谢谢，但这并没有解决问题。我想弄清楚 2 个未显示的 svg 文件与第 3 个显示的文件有何不同。
在命令行上尝试curl -IL http://your.example.com/path/to.svg 并在此处发布输出。