How to fix loading images in .html by WKWebView on iOS device (UniWebView 3, Unity)?

Question

I use UniWebView 3 plugin for Unity for display local .html files. This plugin use WKWebView which does not load local images in .html on iOS device. But .css and .js files succesfully loads (which are in header). In Unity editor images are show correctly (macOS).

Image tag is:

<img src="highlights-14.png" alt="image description" />

highlights-14.png in the same folder with index.html.

Also I tried tags looks like this:

<img src=«/highlights-14.png" alt="image description" />
<img src=«./highlights-14.png" alt="image description" />
<img src=«../highlights-14.png" alt="image description" />
// With moving image into associated folder
<img src=«images/highlights-14.png" alt="image description" />
<img src=«/images/highlights-14.png" alt="image description" />
<img src=«./images/highlights-14.png" alt="image description" /> 

I tried to use readAccessURL (loadFileURL:allowingReadAccessToURL: in WKWebView) in Load method. If i have a URL (path to site) looks like this:

file:///var/containers/Bundle/Application/.../Data/Raw/Products/Research.html

Then I will have next readAccessURL:

file:///var/containers/Bundle/Application/.../Data/Raw/Products/

Also I tried this string for readAcessURL:

file:///var/containers/Bundle/Application/.../Data/Raw/Products

And this:

file:///var/containers/Bundle/Application/.../Data/Raw/

And some other…

I tried to add «Allow Arbitrary Loads in Web Content» key with «YES» value to info.plist (under App Transport Security Settings).

WKWebView still does not load any image. Thank you for any suggestions.

Answer 1

The local image should work fine if you specify the correct path in UniWebView on iOS.

Say if you have a page "index.html" in the StreamingAssets folder and an "image.jpg" file just locates beside the HTML file.

StreamingAssets -- index.html -- image.jpg

Then you can load the image in the page as:

<img src="image.jpg" alt="A demo image" />

and in C#

var url = UniWebViewHelper.StreamingAssetURLForPath("page3.html");
webView.Load(url);

If your images are located in a parent folder, you may need to specify the correct "readAccessURL" parameter in the Load method. You can check the documentation of the Load method here.

Answer 2

Thank you for helping onevcat. But i already have a structure:

StreamingAssets:
- index.html
- image.png

Image tag is:

<img src="image.png"  alt="image description" />

C# code:

string url = UniWebViewHelper.StreamingAssetURLForPath("index.html");
webView.Load(url);

It loads correctly .css and .js files both in Editor and on device. Image loads in Unity Editor (MacOS), but for some reason don't loads on iOS device (iPhone X, iPad, iPadPro).

What else can i try? Maybe something with resources in XCode build? Thank you.