图像URL下载而不是显示图像

Question

我刚刚把网站从我的本地工作文件切换到了服务器。

将它上传到我的作品集时一切都正常，但当它被放在正确的域名下后就出现问题了。图片没有显示出来，反而变成了空白，所以我尝试访问它的直接链接。

但是访问这个链接时，它并没有正常显示图片，而是下载了图片。

以下是直接链接：Direct url

我的标签：<img src="images/login_header.svg" alt="Alright, lets start finding discounts!" />

我的结构：

// root (BBCM)

//// images

////// login_header.svg

//// css

//// js

// end root

我已经尝试了:

• /images/url.svg

• 图片的直接URL

• BBCM/images/url.svg

当它在我的作品集上时，一切都正常，但是在正确的域名上却不行。

有什么想法吗？当图片下载时，它也显示了正确的图像，所以我有点迷失方向。

- Josh Powell

---

你的服务器是否定义了SVG MIME类型？ - Pete

我不确定，在我的作品集中，我从未更改过服务器的功能。在正确的域名上，我必须向我们的IT人员查询。 - Josh Powell

我在使用Chrome（43）和本地文件file://path/to/a/file.svg时遇到了同样的问题，这让我很烦恼。 - yota

Answer 1

您的服务器是否使用正确的MIME类型发送.svg文件？应该是image/svg+xml。

有关类似问题的其他问题，请参见Nginx offers of downoload SVG instead of showing it。

- Olly Hodgson

---

我该如何解决这个问题，只需要指点一下方向就好了。我的IT人员还没有回复我，今天很可能也不会回复。 - Josh Powell

您可以使用浏览器的开发者工具。对于IE浏览器，请按F12打开它们，切换到网络选项卡，开始录制，然后查看.svg文件使用的MIME类型（在详细视图下，在响应标头下）。它可能是application/octet-stream，这是浏览器用来表示“无法识别的二进制blob”的术语。 - Olly Hodgson

在 Chrome 中，它会将其显示为“application/octet-stream”，这是我可以在服务器上修复还是需要我的 IT 人员？ - Josh Powell

这取决于服务器。如果是Apache，通常可以使用.htaccess文件来解决问题。有时会提供控制面板让你进行更改。如果是IIS或其他服务器，你可能需要与IT人员联系。 - Olly Hodgson

Answer 2

一些浏览器不支持使用IMG标签展示SVG文件，但你可以将其放在一个带有图像备选项的对象中，以防浏览器无法呈现。

<object data="image.svg" type="image/svg+xml">
  <img src="fallbackimage.jpg" />
</object>

- Remy Lagerweij

---

IMG标签确实支持SVG文件。您为什么认为它不支持呢？ - Robert Longson

Opera、Safari、Firefox、IE、Chrome都支持，你想到的是哪一个不支持？ - Robert Longson

IE 8.0及以下版本不支持IMG中的SVG，由于仍有太多人使用该浏览器，因此您应该利用备用方案。 - Remy Lagerweij

IE8完全不支持SVG，无论是IMG还是其他方式。 - Robert Longson

这就是为什么你要将SVG放在一个OBJECT中，并在其中放置IMG作为后备，以防IE8出现，这样它就会回退到jpeg而不是svg。 - Remy Lagerweij

Answer 3

尝试使用<object data="/images/login_header.svg" type="image/svg+xml"></object>代替

- LorDex

---

我尝试了一下，但效果不佳。加载页面时，它不是什么都不显示，而是立即开始下载图像。 - Josh Powell