原文出自：iOS原生如何加载HTML中img标签的图片

前言

最近iOS App项目中使用Webview加载H5页面比较多，也有不少朋友经常问到这个问题，在这里我也学习学习如何通过iOS原生的方式来加载H5页面中的图片然后让webview显示图片。

相信有很多朋友也遇到过这样的问题，可是很多朋友都没有思路，不知如何入手。今天，刚好学习了一下，并写了一个简单的demo。下面让我们一起来学习一下吧！

本篇文章适合哪些人群阅读？

• 项目中有类似需求的，而又没有思路的
• 曾经做过类似需求的，可以参考两者的思想有何异同，比较哪种方式更好
• 没有做过类似需求，且也没有思路入手的，可以参考学习

注意：本文有Objective-C版和Swift，根据个人情况看相关章节

思路讲解

这里有两种方式可以实现：

• 直接使用NSData同步加载图片的方式（Swift版用同步实现）
• 通过其他第三方库异步加载图片的方式（ObjC版用异步实现）

Swift版代码讲解

下面看看我们的核心代码吧：

let path = NSBundle.mainBundle().pathForResource("test", ofType: "html")
let url = NSURL(fileURLWithPath: path!)do {let html = try String(contentsOfURL: url, encoding: NSUTF8StringEncoding)//      print(html)// 获取所有img src中的src链接，并将src更改名称// 这里直接采用同步获取数据，异步也是一样的道理，为了方便写demo，仅以同步加载图片为例。// 另外，这不考虑清除缓存的问题。do {let regex = try NSRegularExpression(pattern: "<img\\ssrc[^>]*/>", options: .AllowCommentsAndWhitespace)let result = regex.matchesInString(html, options: .ReportCompletion, range: NSMakeRange(0, html.characters.count))var content = html as NSStringvar sourceSrcs: [String: String] = ["": ""]for item in result {let range = item.rangeAtIndex(0)let imgHtml = content.substringWithRange(range) as NSStringvar array = [""]if imgHtml.rangeOfString("src=\"").location != NSNotFound {array = imgHtml.componentsSeparatedByString("src=\"")} else if imgHtml.rangeOfString("src=").location != NSNotFound {array = imgHtml.componentsSeparatedByString("src=")}if array.count >= 2 {var src = array[1] as NSStringif src.rangeOfString("\"").location != NSNotFound {src = src.substringToIndex(src.rangeOfString("\"").location)// 图片链接正确解析出来print(src)// 加载图片// 这里不处理重复加载的问题，实际开发中，应该要做一下处理。// 也就是先判断是否已经加载过，且未清理掉该缓存的图片。如果// 已经缓存过，否则才执行下面的语句。let data = NSData(contentsOfURL: NSURL(string: src as String)!)let localUrl = self.saveImageData(data!, name: (src as String).md5)// 记录下原URL和本地URL// 如果用异步加载图片的方式，先可以提交将每个URL起好名字，由于这里使用的是原URL的md5作为名称，// 因此每个URL的名字是固定的。sourceSrcs[src as String] = localUrl}}}for (src, localUrl) in sourceSrcs {if !localUrl.isEmpty {content = content.stringByReplacingOccurrencesOfString(src as String, withString: localUrl, options: NSStringCompareOptions.LiteralSearch, range: NSMakeRange(0, content.length))}}print(content as String)webView.loadHTMLString(content as String, baseURL: url)} catch {print("match error")}
} catch {print("load html error")
}

此处省略1000字，完整阅读文章内容，请移步微信公众号阅读。

移步微信公众号阅读全文

源代码

想要下载源代码，请移步github下载，内有Swift版的工程和ObjC版的工程：

https://github.com/CoderJackyHuang/iOSLoadWebViewImage

公众号搜索「iOS开发技术分享」快速关注微信号：iOSDevShares QQ群：324400294