WKWebView fails to load images and CSS using loadHTMLString(_, baseURL:)

ios css swift image wkwebview

30,114

Solution 1

Without taking a look at your actual project it's difficult to give some hundreed percent sure advices.

However:

class ViewController: UIViewController {

    var webView = WKWebView()

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.translatesAutoresizingMaskIntoConstraints = false
        let views = [
            "webView" : webView
        ]
        view.addSubview(webView)
        var constraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[webView]|", options: [.AlignAllLeading, .AlignAllTrailing], metrics: nil, views: views)
        constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat("V:|[webView]|", options: [.AlignAllTop, .AlignAllBottom], metrics: nil, views: views))
        NSLayoutConstraint.activateConstraints(constraints)

        let path = NSBundle.mainBundle().pathForResource("ios - WKWebView fails to load images and CSS using loadHTMLString(_, baseURL_) - Stack Overflow", ofType: "htm")
        let url = NSURL(fileURLWithPath: path!)
        webView.loadHTMLString(try! String(contentsOfURL: url), baseURL: url.URLByDeletingLastPathComponent)

        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

I think the key point here is baseUrl parameter, you should setup it correctly. In my case i've used html's url without last path component - e.g. containing folder. This works fine on both device & simulator - check device snapshot. I've uploaded sample project to https://github.com/soxjke/WKWebViewTest so you can take a look (i've removed codesigning info from git)

So, to recap - method is working, functionality is working, just you do something wrong with it. To help you get what's wrong with your solutions, i'll add some suggestions: 1. Remember, that simulator filesystem is case-insensitive, device filesystem is case-sensitive. So if you have your filenames in html in lowercase - this won't work on device. 8fFsD.png != 8ffsd.png 2. Remember, that when copying resources, XCode ignores your folder structure. So if your html has <img src="./img/1.png"> and your XCOde project has folder structure like

test.htm

img/

    1.png 
    2.png

After build it will be flattened, so test.htm and 1.png and 2.png will reside on same level

test.htm
1.png 
2.png

I'm almost sure, after you verify these two assumptions, you'll get this method working.

Solution 2

I had this problem today, I've found the solution and potentially the cause:

loadHTMLString(String, baseURL: URL?)

This function doesn't allow the rendered HTML to access local media, as far as I'm aware, this is because it would be an injection risk, this could allow rendered HTML to access and manipulate your local file system. With a html string, that could come from anywhere or anyone.

loadFileURL(URL, allowingReadAccessTo: URL)

With this function, you point the WKWebview to the html file in your FileManager, and to the containing folder with 'allowingReadAccessTo'. Because the html is stored within the FileManager, it will allow the rendered HTML to access locally stored media.

If you don't have the html file stored locally for some reason(I assume you do), You could write the html sting into a .html file, then point to the URL of that file. However, this is just subverting Apple's protection, so do it at your own peril (don't do it).

This is just the solution that worked for me and my understanding of why we're having the problem to begin with.

Edit #1: Typo.

Edit #2: I've since found another nuance, When stating the 'allowingReadAccessTo:' URL, if the HTML itself needs to access things in parent folders (ie: .css, .js files), you need to specify the parent folder, not necessarily the location of the HTML itself, this will then implicitly allow access to the child folders as required also. For me, this problem was only apparent on a physical device, this didn't seem to have an effect whilst running in simulator, likely another discrepancy between how permissions work on simulator and a physical device.

Solution 3

Personally, I had to switch to using XWebView as the out-of-the-box behavior of WKWebView does not allow loading of local files. XWebView tricks it by loading up a local web server in the background and directing local traffic thru it. (XWebView is based on top of WKWebView)

Seems a bit overkill, but that is what I ended up having to do.

Solution 4

I've been experimenting with this as well, with similar restrictions, and the problem appears to be that paths aren't resolved unless baseURL references the application bundle. It doesn't work if you, for example, have something in the application's documents.

Edit: I have filed a radar for this rdar://29130863

Solution 5

Well you should be able to use local images and CSS files (and JavaScript files for that matter) with WKWebViews with the function that you have already found. My guess is that the problem is with your baseURL variable.

Update 7.5.2017:

I have completely updated the code from another SO answer of mine that used to be linked to my answer here. I have a working project for loadHTMLString() and .loadFileURL()

View more solutions

30,114

Author by

Mischa

Watch my talks on ▶️ The Art of Designing Code ▶️ Auto Layout

Updated on July 26, 2022

Comments

Mischa almost 2 years
Apple's recommendation:

In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView.

Thus, I have replaced my good old UIWebView with a shiny new WKWebView. But what I thought to be an easy exercise (simply swapping the classes and replacing the delegate methods) turned out to be a real mess.

The Problem

When I load an HTML string using
```
loadHTMLString(String, baseURL: URL?)
```
the web view loads and renders the pure HTML but it doesn't load any images or CSS files referenced inside the htmlString.

This happens only on a real device!
In Simultor all referenced resources are loaded correctly.

Example

I have defined a simple htmlString in my view controller class:
```
let imageName = "image.png"

let libraryURL: URL // The default Library URL

var htmlString: String {
    return "<html> ... <img src=\"\(imageName)\" /> ... </html>"
    // "..." represents more valid HTML code incl. header and body tags
}
```
The image is stored in the root Library folder so its URL is:
```
let imageURL = libraryURL.appendingPathComponent(imageName)
```
Now I load the htmlString into the web view:
```
webView.loadHTMLString(htmlString, baseURL: libraryURL)
```
and it doesn't load the image even though the baseURL is set correctly.

Ideas for a Solution
1. Maybe WKWebView has a problem with resolving relative paths so my first idea was to use absolute paths inside the HTML string instead.
  → ❌ Doesn't work.
2. Two answers to another SO post suggested that using
  loadFileURL(URL, allowingReadAccessTo: URL)
  instead of loadHTMLString(...) works in iOS 9+.
  → ✅ That works.
However, I cannot use solution 2 because my HTML files are encrypted and the decrypted files must not be stored on the disk.

Question

Is there any way to load local resources like images and styles using the WKWebView's
```
loadHTMLString(String, baseURL: URL?)
```
function? Or is still a bug in iOS 9+?

(I just cannot believe that Apple provides and recommends using a web view that cannot load any local web content from inside an HTML string?!)
Mischa over 7 years

Sounds like a smart work-around! Will try that. However, it really feels like dirty hacking in my case because I'll have to parse the HTML, find all image URLs, encode them as base64 data and replace the URL with the data.
moliveira over 7 years

yea, I can see that. In my case I already have the image that i want to get into the html so it was a bit cleaner.
Mischa over 7 years

Have you tried that on a real device? Because this is pretty much what I have done. The baseURL is supposed to be the location from which your relative paths are resolved but the issue can't really be related to that because I've tried referencing absolute paths in the HTML as well and it doesn't work either.
Mischa over 7 years

(Btw: Once you figure out the quirks everything is quite alright. There shouldn't be any quirks in the first place!)
Mischa over 7 years

Thanks for the adivce. I've read about this web server trick in other posts. But it really feels like a big overkill to use an external library to setup a local web server just to render some basic HTML - a task that's a webview's main purpose!
Mischa over 7 years

Thanks for sharing the sample project on GitHub. With that I've been able to make the webview load the resources on my iPhone. I haven't quite figured out what's wrong with my implementation and why it's working only in the Simulator but I'll look into it as soon as I get the time and will post my findings in another answer on this page.
Petro Korienev over 7 years

Glad that my answer helps. As i've written, i suggest to check filenames and case first, and folder structure next. 99% you will find an issue.
TotoroTotoro over 6 years

Solved my problem. Thanks!
Zion Perez over 5 years

I've tried base64 encoding the images and it still does not work. github.com/starkindustries/Print2PDFTest
ozd over 4 years

I have the exact same problem as the rdar. Any chance you remember what you end up doing? :)
green0range about 4 years

This was it! CSS stopped working after moving to WKWebView which worked perfectly fine in UIWebView. Now that I save html to a file and read it as file url with allowingReadAccessTo: to, everything loads fine.
iMinion over 3 years

@green0range if u could help me out stackoverflow.com/questions/63800637/…
PJR about 3 years

Could you please check my question where HTMLString is a requirement for me, facing same issue stackoverflow.com/questions/66050435/…