iOS WKWebview loadHTMLString(_ baseURL:) 加载图片和读取css失败答案

【问题标题】：iOS WKWebview loadHTMLString(_ baseURL:) fails to load images and read cssiOS WKWebview loadHTMLString(_ baseURL:) 加载图片和读取css失败
【发布时间】：2020-04-26 23:12:39
【问题描述】：

我知道以前有人问过这个问题，但我的情况有点不同。

我正在尝试在WKWebview 上调用loadHTMLString(_ baseURL:)，而我的baseURL 位于AppData/Documents 目录中。

我需要加载HTMLstring，它需要使用该目录中的图像。 HTMLstring 不在任何地方，我下载字符串解析它，修改它并加载它。

据我了解，由于某种安全问题（它在 UIWebview 上运行良好），我不能这样做，所以 HTMLstring 已加载，但图像和 CSS 未加载。

另外，由于我自己的安全问题，我无法调用loadFileURL(_, allowingReadAccessTo:)，因为我没有文件我有HTMLstring，并且无法在调用之前将其保存到文件中。

我的代码非常庞大且复杂，我希望以最轻松的方式加载图像。

有人有想法吗？

【问题讨论】：

ozd，您找到解决方案了吗？我无法从 Documents 目录中获取本地图像以使用 loadHTMLString 显示。（对我来说适用于模拟器，但不适用于设备。）一种解决方法可能是对图像数据进行 base64 编码并添加到 html，尽管在某些情况下它不是一个很好的解决方案（例如，我仍然需要让本地视频也能正常工作）。

标签： ios wkwebview

【解决方案1】：

我不确定你把它放在哪里的源 HTML 代码。我假设您将它放在捆绑包中。这是我的想法。

在图像标签的 HTML 文件中。我们应该喜欢这个模板。

<image src="{xxx}" ....>

然后在 iOS 代码中。我们将图片路径替换为 src 并加载到 WKWebview 中：

// make sure you have the image name and extension (for demo purposes, I'm using "myImage" and "png" for the file "myImage.png", which may or may not be localized)
NSString *imageFileName = @"myImage";
NSString *imageFileExtension = @"png";

// load the path of the image in the main bundle (this gets the full local path to the image you need, including if it is localized and if you have a @2x version)
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString *imagePath = [documentsDirectory stringByAppendingPathComponent:[NSString stringWithFormat:@"%@.%@", imageFileName, imageFileExtension]];

// generate the html tag for the image (don't forget to use file:// for local paths)
NSString *imgFilePath = [NSString stringWithFormat:@"file://%@", imagePath];

// Replace an imagepath
NSString *path = [[NSBundle mainBundle] pathForResource:@"filename" ofType:@"html"];
NSString *html = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
html = [html stringByReplacingOccurrencesOfString:@"{xxx}" withString:imgFilePath];


// Folder html url
NSString *destinationHTMLFolder = [[NSBundle mainBundle] pathForResource:@"myhtml" ofType:@""];
NSURL *destination = [NSURL fileWithPath: destinationHTMLFolder]

[self.webView loadHTMLString:html baseURL:destination];

注意：请确保 baseURL 指向 HTML 文件夹。它在将 HTML 源代码添加到 Xcode 时，应该是“创建文件夹引用”选项。

【讨论】：

我不确定...它可以处理多个图像吗？另外，为什么这会起作用？是不是阻止它首先读取文件的问题会阻止图像加载？另外，我需要使用该目录中的 CSS 文件...你知道它是否也适用于 CSS 吗？
喜欢代码概念。您也可以替换 CSS 文件中的图像路径。
你用 WKWebview 测试过吗？与文档文件夹中的来源？因为这对我不起作用。此外，我从服务器动态获取 HTML 并对其进行加密，因此我下载文件，获取其内容，在我的代码中将其转换为 HTML，然后才将 HTML 加载到我的 webView 中。所以我没有在任何地方保存 HTML 文件。

【解决方案2】：

我希望我有一个更好的答案，如果有人有更好的答案，我很乐意接受。我最终将我的文件移动到临时目录:(我用过这个 -

extension FileManager
{
    func copyToTemporaryDirectory(itemIn itemURL: URL) -> URL?
    {
        let tempDirectoryURL    = URL(fileURLWithPath: NSTemporaryDirectory())
        let fileName            = itemURL.lastPathComponent
        let copyURL             = tempDirectoryURL.appendingPathComponent(fileName)
        let fileManager         = FileManager.default

        do {

            if fileManager.fileExists(atPath: copyURL.path)
            {
                try fileManager.removeItem(at: copyURL)
            }

            try FileManager.default.copyItem(at: itemURL, to: copyURL)

            return copyURL

        }
        catch let error
        {
            logger.debug("copyItem error: \(error.localizedDescription)")
            return nil
        }
    }
}

然后将loadHtmlString 与URL 一起添加到此目录。从此目录中，WKWebview 可以获取所有内容。

【讨论】：