6

I need to write the code which will load some HTML (received from external source by other means) into WebView and display images referenced in this HTML. These images will be stored locally somewhere in Windows.Storage.ApplicationData.Current.LocalFolder.

Neither of suggestions at use local image to display in webview for windows phone 8.1 or Use local images in Webbrowser control work for me. If I load such HTML with web.NavigateToString(html):

<html><head></head><body>A <img src="file:///c:/Users/idh/AppData/Local/Packages/d783af9f-88eb-42f5-ab0f-abb025f32baa_5cy2zb9g43kb2/LocalState/folder/image001.jpg"> B</body></html>

I get just A B displayed. I tried slashes and backslashes, double and triple slashes after file:, ms-appx: and relative paths instead of file:, etc. The image never gets displayed. At the same time, if I save this in HTML file and open it outside of my app, it's displayed fine. I also successfully save and read these files (they are actually appeared in that folder because my app created them so unauthorized access is not an issue). package.manifest does include Private networks.

I'd better not use embedding with base64, custom uri resolver and other special techniques because I'm not the actual developer of the application. I make a library which gets HTML and saves images to local storage and now I need to demonstrate an easy to use method to visualize the stored content in WebView like I earlier did for normal .NET framework. I.e. I'm actually writing a sample for developers who are users of my library and these folks will then use my sample to deal with this HTML and images.

As the last resort, I can end up writing base64 or custom resolver for UWP version of my sample (while for other platforms like normal .NET framework the same procedure is much easier). But I want to at least be sure that the direct route of selecting proper URLs for images in the source HTML is not possible and I won't end up with situation where I wrote some quite complicated stuff and then someone experienced in UWP apps reveals that I over-engineered things. I.e. some expert opinion "no, it's not possible in UWP and you MUST use base64 embedding or custom URI resolving" will work for me too.

Community
  • 1
  • 1
Alex
  • 2,469
  • 3
  • 28
  • 61
  • as far as I know, you must use UriResolver https://code.msdn.microsoft.com/windowsapps/Windows-Store-Apps-How-to-8073b0da it was the only option back then, don't think that anything new came up – RTDev Dec 30 '16 at 18:42
  • 1
    the location as in your sample is most likely not valld. In your webview you can refer to local files via ms-appdata:///local if it's in your local data (ApplicationData.Local) or via ms-appx:/// if it's in the content of your appx. – Dave Smits Dec 30 '16 at 22:19
  • I indeed didn't try ms-appdata: (and wasn't aware of that option) yet, will give it a try. Thanks! – Alex Dec 30 '16 at 22:21
  • No, it didn't work out with ms-appdata. Seems I'll have to live with base64 encoding or custom resolving (options which I knew from the beginning but wanted to avoid). – Alex Jan 10 '17 at 10:29

1 Answers1

9

Although NavigateToString supports content with references to external files such as CSS, scripts, images, and fonts. But it only supports content in the app package using the ms-appx-web scheme, and web content using the http and https URI schemes. It can't work with assets located in the apps local folder. So using file:///, ms-appdata:/// or ms-appx:/// scheme won't work here.

To achieve what you want, you can use Base64 encoded images or custom URI resolver. Also I think you can store the html string to a file under the same subfolder that stores these image assets. In the html, you can use relative URI to reference these assets like what in my previous answer. And then use the Navigate method with a Uri that uses the ms-appdata scheme. For example:

var html = "<html><head></head><body>A <img src=\"image001.jpg\"> B</body></html>";

var folder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("folder", CreationCollisionOption.OpenIfExists);
var file = await folder.CreateFileAsync("html.html", CreationCollisionOption.OpenIfExists);
await FileIO.WriteTextAsync(file, html);

webView.Navigate(new Uri("ms-appdata:///local/folder/html.html"));
Community
  • 1
  • 1
Jay Zuo
  • 15,653
  • 2
  • 25
  • 49
  • Thanks! This method worked! When HTML file is saved locally and image path is relative to that path. – Alex Jan 10 '17 at 12:48