<img> 无法加载没有扩展名的 SVG 文件

陪她去流浪 桃子 阅读次数:47

之前因为安全问题把所有存储到云厂商的图片都加了密1,本地解密后通过创建 URL.createObjectURL 的形式重新设置到 <img> 上。其它格式的图片都没有问题,最近发现 SVG 图片不行,甚是奇怪。因为我一直认为文件的具体类型只跟二进制数据有关,而跟扩展名不太相关。看起来到了浏览器这里受到了一点教训。

为了验证这是不是 Blob URL 带来的问题,我尝试直接写了一段 HTML:

1
<img src="image">

上述的 image 是个没有扩展名的 SVG 图片(原名是 image.svg)。结果发现:Firefox 和 Chrome 都无法显示。

然后我再尝试了一下直接用浏览器打开:

1
2
$ open -a Firefox image
$ open -a 'Google Chrome' image

结论是:Firefox 可以打开,Chrome 则不行。

这样看来,浏览器对这种纯文本的图片格式确实需要提供更多的信息才能正确显示。于是我尝试在创建 Blob 的时候设置了一下 Content-Typenew Blob([data], { type: 'image/svg+xml' }),然后就真的可以了。

Go 的 http.DetectContentType 应该是完整实现了 Web 规范的内容类型检测的,虽然也没能完整检测出来是 SVG,但是好歹是个 XML:Go Playground

奇奇怪怪,我还是老老实实加个类型提示吧。

要准备看苹果发布会了。收工。