All geek questions in one place

Uploading local images to WKWebView

I am trying to get WKWebView to display locally loaded images in WKWebView . Web browsing typically displays HTML that is retrieved remotely. HTML content can sometimes contain deleted image links. My application parses HTML and looks for these HTML tags, downloads the file it refers to, and then replaces the remote link with a local one.

Usually this will not be very difficult, but images will not be displayed, presumably due to images and local HTML files for web browsing, located in two separate directories (document directory and application directory, respectively). I have seen people suggest moving image uploads to the same directory as HTML files, but this is not an option for me, since I don’t want to start mixing files downloaded by the user with local assets.

What will be my best course of action here?

+4
source share
3 answers

Ok, I found a workaround. Instead of locally storing images and referencing them in HTML files, I now convert the images to Base64 and then add them to the HTML. This is not perfect, but he is doing his job. I am going to leave this question open if someone manages to find the actual solution.

+3
source

To display cached HTML links to cached resources in WKWebView :

  • For each of the resources in your HTML content line, write it to the directory according to NSTemporaryDirectory() . Thus, an image tag, for example:

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

    should be cached and replaced with something like this:

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

  • Now cache the HTML content string with the replaced resource urls. It must also be cached in the directory provided by NSTemporaryDirectory() . One of the differences here is that it must be cached (and later specified) using the file:// protocol as a restriction on line caching using NSData (see Code Example).

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

A few notes:

  • You cannot load HTML as a raw string ( loadHTMLString:baseURL: .
  • You cannot reference a cached resource in your HTML string using the file:// protocol. This may work in UIWebView , but will not work in WKWebView .

Objective-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)

Swift

 // 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)
+1
source

I had the same problem with WKWebView, as it cannot load both html strings and images at the same time for security reasons. I switched to UIWebView, which is deprecated, but I was able to load the html strings and the referenced images at the same time.

0
source

Source: https://habr.com/ru/post/1244194/

More articles:


All Articles