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

Posted 2023-03-15

【中文标题】iOS 10 beta 上的 UIWebView：不加载任何 svg 图像

【英文标题】：UIWebView on iOS 10 beta: not loading any svg images

【发布时间】：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 上加载。

【参考方案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>

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