nginx无法提供.svg文件。

3

我对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> 

所有文件都在指定目录中,并且权限从根到下面的所有者= rwx,组= x,其他= 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文件无法渲染(所有其他文件正常工作):

  1. search.svg

  2. tooltag-add.svg

  3. icon-yes.svg

这里很奇怪。如果你将这些文件重命名为任何其他名称,然后更改index.html引用新名称,它们就可以正常渲染。这些名称有什么奇怪的地方吗?Nginx是否以某种方式在其他地方查找这些名称?对我来说这毫无意义。

我想确定我看到的是真的。search.svg不会被渲染。我将文件名更改为search2.svg,然后在index.html文件中也进行了更改。正常工作。然后我在两个文件中都将其更改回search.svg - 不起作用。一个文件名竟然会导致这样的情况。有人知道原因吗?


查看访问日志 - 浏览器是否实际请求了文件?你的 /static/index.html 文件格式不正确 - 我不知道这是否是一个因素。 - Richard Smith
我刚刚发布了访问日志。似乎有一个请求得到了404错误。 - Sam Melehy
访问日志错误是由于第三个SVG文件名拼写错误导致的。我已经更正了它,现在该SVG与PNG一起显示,但其他两个SVG没有显示。 - Sam Melehy
你在修改后清除了浏览器缓存吗? - Richard Smith
谢谢。清除浏览器缓存解决了问题。Ctrl+F5。 - Sam Melehy
2个回答

12

确保您实际在 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; 
  } 
  } 
} 

谢谢,但那并没有解决问题。我现在只能尝试找出这两个不显示的SVG文件与第三个有何不同了。 - Sam Melehy
请在命令行中尝试 curl -IL http://your.example.com/path/to.svg 并将输出贴在这里。 - Danila Vershinin
谢谢。我已经添加了"include /etc/nginx/mime.types;",在重新启动容器后,它终于显示出来了! - Robert Coroianu
谢谢。我已经添加了"include /etc/nginx/mime.types;",在重新启动容器后,它终于显示出来了! - undefined

3
清除浏览器缓存(使用Ctrl+F5)可以解决这个问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接