Menu
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.
363
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"));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
