iOS 10 beta 上的 UIWebView：不加载任何 svg 图像答案

【问题标题】：UIWebView on iOS 10 beta: not loading any svg imagesiOS 10 beta 上的 UIWebView：不加载任何 svg 图像
【发布时间】：2016-11-14 01:51:44
【问题描述】：

我们正在开发一个 cordova ios 应用程序，我们最近安装了 xcode 8-beta 以查看我们的应用程序在 ios 10 下如何运行。到目前为止，我们只注意到一个问题：没有加载 svg 图像。这些图像使用 css 设置为各种元素的背景，并且在 9.3.2 及以下版本下都可以正常工作。

【问题讨论】：

这里有同样的问题...内嵌 Base 64 编码的 svg 图像似乎工作正常。我注意到 svg 图像在模拟器上可以正常加载，但无法在运行 iOS 10 的物理 iPhone 上加载。

标签： cordova hybrid-mobile-app

【解决方案1】：

如果您的 cordova 应用使用实现 URLProtocol 的插件，例如 phonegap contentsync plugin，您可能会看到 SVG 响应标头的 MIME 类型存在错误。

在 iOS 10 之前，MIME 类型是自动设置的，可能作为 API 的一项功能（尚未确认），但现在似乎不再如此。您可以通过在[URLProtocol startloading] 期间显式设置响应的 MIME 类型 (Content-Type) 来解决此问题：

（改编自phonegap contentsync和这个MIME Check）

- (void)startLoading {
    NSData *data = [NSData dataWithContentsOfFile:self.request.URL.path];

    NSString *fileExtension = self.request.URL.pathExtension;
    NSString *UTI = (__bridge_transfer NSString *)UTTypeCreatePreferredIdentifierForTag(kUTTagClassFilenameExtension, (__bridge CFStringRef)fileExtension, NULL);
    NSString *contentType = (__bridge_transfer NSString *)UTTypeCopyPreferredTagWithClass((__bridge CFStringRef)UTI, kUTTagClassMIMEType);

    // add the MIME Type to the existing header.
    NSMutableDictionary *headers = [NSMutableDictionary dictionaryWithDictionary:self.request.allHTTPHeaderFields];
    headers[@"Content-Type"] = contentType;

    // create a response using the request and our new HEADERs
    NSHTTPURLResponse *response = [[NSHTTPURLResponse alloc] initWithURL:self.request.URL
                                                              statusCode:200
                                                             HTTPVersion:@"1.1"
                                                            headerFields:headers];

    [self.client URLProtocol:self didReceiveResponse:response
          cacheStoragePolicy:NSURLCacheStorageAllowedInMemoryOnly];
    [self.client URLProtocol:self didLoadData:data];
    [self.client URLProtocolDidFinishLoading:self];
}

【讨论】：

仅供参考，此修复程序最近 merged 进入 phonegap。

【解决方案2】：

如果这有助于其他不想修改 URLProtocol 代码的人，我只是将我的 img 标签替换为 object 标签：

<img src="img/logo.svg" alt="Logo" width="280" class="logo">

<object type="image/svg+xml" data="img/logo.svg" width="280" class="logo">Logo</object>

我知道这可能不适用于所有情况，但它对我有用。

【讨论】：