图片 url 下载图片而不是显示它

Posted 2023-03-05

【中文标题】图片 url 下载图片而不是显示它

【英文标题】：Image url downloads the image instead of displaying it

【发布时间】：2014-02-27 03:46:59

【问题描述】：

我刚刚将站点从我的工作文件切换到服务器。

当我将它上传到我的投资组合时它运行良好，但一旦它在正确的域上它就停止工作了。图像，而不是显示，只是显示为空白，所以我尝试转到它的直接 url。

它下载图像而不是显示它，而不是工作。

这里是直接网址：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

图片的直接网址

BBCM/images/url.svg

当它在我的portfolio 上但不是在正确的domain 上时，它工作正常。

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

【问题讨论】：

您的服务器是否定义了 svg mime 类型？

我不确定，在我的投资组合中，我从未对服务器的功能进行任何更改。在正确的域上，我必须让我们的 IT 人员查看。

我对 chrome (43) 和本地文件 file://path/to/a/file.svg 也有同样的问题，这让我抓狂。

【参考方案1】：

某些浏览器不允许 IMG 标签支持 SVG 文件，但是您可以将其放在带有图像的对象中作为后备，以防浏览器无法渲染。

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

【讨论】：

IMG 标签确实支持 SVG 文件。是什么让你认为它没有？

我的错，它支持。但并非所有浏览器都如此，因此最好使用 OBJECT 标签进行适当的回退。

Opera, Safari, Firefox, IE, Chrome 都这样做你觉得哪一个没有？

IE8 根本不支持 SVG，IMG 或其他。

这就是为什么你将 SVG 放在一个带有 IMG 的 OBJECT 中作为备用，以防 IE8 出现，所以它会退回到 jpeg 而不是 svg。

【参考方案2】：

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

请参阅nginx offers of downoload SVG instead of showing it 了解另一个相同的问题。

【讨论】：

我该如何解决这个问题，只是对正确方向的一点表示赞赏？我的 IT 人员没有回复我，而且很可能今天也不会。

您可以使用浏览器的开发者工具。对于 IE，按 F12 打开它们，切换到网络选项卡，开始录制，然后查看.svg 文件的 MIME 类型（它将在详细视图中，在响应标题下）。它可能是application/octet-stream，这是unrecognised binary blob 的浏览器语言。

在 chrome 中它确实显示为 application/octet-stream，这是我可以在服务器上解决的问题还是我需要我的 IT 人员？

这取决于服务器。如果是 Apache，一般可以use a .htaccess file to fix the problem。有时会提供一个控制面板，让您更改它。如果是 IIS 或其他什么，您可能需要与您的 IT 人员交谈。

【参考方案3】：

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

【讨论】：

我可以尝试一下，但效果不佳。它不会显示任何内容，而是在您加载页面时立即开始下载图像。