如何在WkWebView中加载本地图片与远程HTML资源？

你的JS注入本地图片的思路是完全可行的，下面针对你的需求给出分场景的具体实现步骤：

一、基础准备 #

将本地图片添加到项目中，确认Target Membership已勾选，获取其本地文件路径：

guard let localImagePath = Bundle.main.path(forResource: "your-image-name", ofType: "png") else { return }
let localImageUrl = URL(fileURLWithPath: localImagePath)

二、正常场景：加载远程资源并注入本地图片 #

1. 先通过WKWebView.load(URL)加载远程资源，在WKNavigationDelegate的页面加载完成回调中注入JS，将本地图片插入到页面指定位置：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 构造JS代码：将本地图片插入到页面目标容器（示例为id是image-container的元素）
    let jsInjectCode = """
        let imgElement = document.createElement('img');
        imgElement.src = '\(localImageUrl.absoluteString)';
        imgElement.style.width = '100%'; // 根据附图效果调整样式
        document.getElementById('image-container').appendChild(imgElement);
        """
    webView.evaluateJavaScript(jsInjectCode) { _, error in
        if let err = error {
            print("图片注入失败：\(err.localizedDescription)")
        }
    }
}

2. 注意：如果远程页面的内容安全策略（CSP）限制了file://协议资源加载，需要和后端沟通调整规则，或者通过WKWebViewConfiguration的userContentController添加自定义脚本绕过限制。

三、异常场景：远程资源不可用时仅展示本地图片 #

在WKNavigationDelegate的加载失败回调中，加载自定义本地HTML来单独展示图片：

func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
    // 构造仅展示本地图片的HTML字符串，样式可匹配附图效果
    let fallbackHtml = """
        <!DOCTYPE html>
        <html>
        <body style="margin:0; display:flex; justify-content:center; align-items:center; height:100vh; background:#fff;">
            <img src="\(localImageUrl.absoluteString)" style="max-width:90%; max-height:90%;" />
        </body>
        </html>
        """
    webView.loadHTMLString(fallbackHtml, baseURL: nil)
}

四、额外优化建议 #

• 提前缓存远程HTML/CSS资源，减少重复请求并提升加载稳定性
• 注入JS前先校验目标容器是否存在，避免无意义报错：

let checkContainerJs = "document.getElementById('image-container') !== null"
webView.evaluateJavaScript(checkContainerJs) { result, _ in
    if let exists = result as? Bool, exists {
        // 执行图片注入的JS代码
    }
}

内容的提问来源于stack exchange，提问作者alphabetF