Question

我遇到了一个无法在Safari上显示svg图像的错误。经过调查，我意识到这是由于我将资源加载为在浏览器中拆分的文件包/归档。

当我加载资源时，我得到一个纯文本blob。我使用blob.slice()提取资源，并传递正确的MIME类型。但是，新的Blob似乎没有正确的MIME类型，但仍然是旧的（纯文本）。事实证明，在Chrome和Firefox上，即使其MIME类型不正确，也可以显示该图像，但在Safari上却不能。

这是无效的代码：

const blob = new Blob([ressource], {
  type: "text/plain",
});

const slicedBlob = blob.slice(0, blob.size, "image/svg+xml"); 
// slicedBlob.type is "text/plain"

我还转载了一些最小的测试用例：https://jsbin.com/yavaxadalo/edit?js,output

从MDN文档和W3C specs看来，我也按预期使用了该方法，但也许我遗漏了一些东西？

Answer 1

我不得不承认，我对这个Safari的错误一无所知。可能应该是reported。

我想指出您的jsbin有点误导，因为slice方法正确返回的Blob的type设置为'image/svg+xml'（您正在记录原始类型blob2），但这只会使事情变得更加奇怪...

现在，我不太清楚为什么要在这里使用Blob.slice，如果您只想更改该Blob的类型，则只需使用Blob()创建一个新的Blob。构造函数，它也接受其他Blob作为 blobType 。

const blob1 = new Blob([
`<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100"/>
</svg>`
], {type: 'text/plain'});
console.log(blob1.type);

const blob2 = new Blob([blob1], {type: 'image/svg+xml'});
console.log(blob2.type);
img.src = URL.createObjectURL(blob2);

<img id="img">

如果您真的希望使用Blob.slice方法，则可以通过Blob构造函数创建一个新方法来正确包装它：

const blob1 = new Blob([
`<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100"/>
</svg>[BAD-DATA]`
], {type: 'text/plain'});

// if we need to slice it
const sliced = blob1.slice(0, blob1.size - '[BAD-DATA]'.length);
// wrap it again for Safari...
const blob2 = new Blob([sliced], {type: 'image/svg+xml'});
img.src = URL.createObjectURL(blob2);

<img id="img">

切片Blob时无法设置正确的MIME类型

1 个答案: