加载本地图片到WKWebView

Question

我正在尝试让 WKWebView 在

WKWebView

中显示本地下载的图像。 webview 通常显示 HTML，这是远程检索的。 HTML 的内容有时可能包含图像的远程链接。我的应用程序解析 HTML 并查找这些 HTML 标签，下载它引用的文件，然后将远程链接替换为本地链接。

通常来说，这不会很困难，但图像不会显示，可能是因为图像和 webview 的本地 HTML 文件位于两个单独的目录中（分别是文档目录和应用程序包目录）。我见过有人建议将图像的下载目标移动到 HTML 文件所在的同一目录，但这对我来说不是一个选择，因为我不想开始将用户下载的文件与本地资源混合在一起.

我最好的行动方案是什么？

Answer 1

嗯，我找到了解决方法。现在，我不再将图像存储在本地并在 HTML 文件中引用它们，而是将图像转换为 Base64，然后将它们添加到 HTML 中。这并不理想，但它可以完成工作。如果有人设法找到实际的解决方案，我将保留这个问题。

Answer 2

要显示引用缓存资源的缓存 HTML

WKWebView

:

对于 HTML 内容字符串中的每个资源，将其缓存到

NSTemporaryDirectory()

提供的目录中。所以图像标签如下：

...<img src='https://www.myimage.com/example_image.png'/>...

应该被缓存并替换为这样的内容：

...<img src='/private/var/mobile/Containers/Data/Application/527CF4FC-9319-4DFF-AB55-9E276890F5DC/tmp/example_image.png'/>...

现在使用替换的资源 URL 缓存 HTML 内容字符串。它还必须缓存在
```
NSTemporaryDirectory()
```
提供的目录中。这里的一个区别是，它必须使用
```
file://
```
协议进行缓存（并在稍后引用），作为使用
```
NSData
```
缓存字符串的限制（请参阅示例代码）。

例如
```
file:///private/var/mobile/Containers/Data/Application/527CF4FC-9319-4DFF-AB55-9E276890F5DC/tmp/my_html_content_string.html
```

有几点需要指出：

您无法将 HTML 作为原始字符串加载 (
```
loadHTMLString:baseURL:
```
)。
您无法使用
```
file://
```
协议在 HTML 字符串中引用缓存的资源。这可能适用于
```
UIWebView
```
，但不适用于
```
WKWebView
```
。

目标-C

// To cache the HTML string:
NSString *HTML = <HTML CONTENT WITH CACHED RESOURCES>;
NSData *data = [HTML dataUsingEncoding: NSUTF8StringEncoding];
[data writeToURL: cachedHTMLURL atomically: YES];

// To load the store HTML file:
[myWKWebView loadRequest: [NSURLRequest requestWithURL: cachedHTMLURL]]; // (file://.../tmp/my_html_content_string.html)

斯威夫特

// To cache the HTML string:
let HTML = <HTML CONTENT WITH CACHED RESOURCES>
let data = HTML.data(using: String.Encoding.utf8)
do {
    try data.write(to: cachedHTMLURL, options: .atomic)
} catch {
    print(error)
}

// To load the store HTML file:
myWKWebView.load(URLRequest(url: cachedHTMLURL)) // (file://.../tmp/my_html_content_string.html)

Answer 3

我对 WKWebView 也有同样的问题，因为出于安全目的，它无法同时加载 html 字符串和图像。我切换到 UIWebView，它已被弃用，但我能够同时加载 html 字符串和引用的图像。

Answer 4

我为我工作的公司开发了一个明确的解决方案。但它依赖于 html/javascript 端。在 html 代码中任何需要引用本地图像的地方

<img src="..."/>

您都应该动态设置此

"src"

，它将无缝工作。

function getLocalURL(path) {
    let origin = window.location.origin
    if (origin == "file://") {
        return origin + window.location.pathname.replace("/index.html","") + path
    }
    return path
}

显然，您应该将 index.html 重命名为您的主 .htm(l) 文件名:)

用法：

getLocalURL("/local_images/location_icon.png")

将返回引用的本地图片路径的WKWebView工作路径：

"file:///Users/arthurdapaz/Library/Developer/CoreSimulator/Devices/5073AF19-26A0-460E-BC82-E89100B8E1AB/data/Containers/Data/Application/2B099343-0BF5-4849-B1C2-2512377A9772/Documents/distDriver/local_images/location_icon.png"

Answer 5

提供文件的最佳方法是使用以下设置：

加载本地图片到WKWebView

问题描述投票：0回答：5

5个回答

最新问题

加载本地图片到WKWebView

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5