Display resource map image in UWP WebView Control

Question

In this link

It shows us how to share out HTML with content of both text and an image through use of ResourceMap.

But the corresponding article is not showing us how to read it and put it in the webview properly.

I know how to get the resource map back, but I don't know how best to put it into the WebView.

this.sharedResourceMap = await this.shareOperation.Data.GetResourceMapAsync();
foreach (KeyValuePair<string, RandomAccessStreamReference> item in this.sharedResourceMap)
{
    ResourceMapValue.Text += "\nKey: " + item.Key;
}

Item.Key will be something like ms-appx:///Assets/Logo.png

https://stackoverflow.com/questions/41401047/display-local-images-in-uwp-webview-control/41423396#41423396 is a related question but they have the files in the local folder, where mine is in this "Assets" folder — freshWoWer, Apr 13 '17 at 19:27

Arnaud Develay · Accepted Answer · 2017-04-14T13:21:01.330

You should leverage the class IUriToStreamResolver.

In the following example, I load the HTML file (example.html) located in Assets folder. The Assets folder also contains all images of the HTML file. The GetContent method of IUriToStreamResolver should be overriden to transform any request to an URI specified in the HTML file (such as ) into a local uri path. In your case, you may have to tweak the GetContent so as to retrieves file stored by your resource map.

public sealed partial class WebViewLocalImage : Page
{
    public WebViewLocalImage()
    {
        this.InitializeComponent();
        Loaded += MainPage_Loaded;
    }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        var uri = this.myWebView.BuildLocalStreamUri("InternalAssets", "example.html");
        this.myWebView.NavigateToLocalStreamUri(uri, new StreamUriResolver());
    }
}

public sealed class StreamUriResolver : IUriToStreamResolver
{
    public IAsyncOperation<IInputStream> UriToStreamAsync(Uri uri)
    {
        string path = uri.AbsolutePath;
        return GetContent(path).AsAsyncOperation();
    }

    private async Task<IInputStream> GetContent(string URIPath)
    {
        try
        {
            Uri localUri = new Uri("ms-appx:///Assets/" + URIPath);
            StorageFile f = await StorageFile.GetFileFromApplicationUriAsync(localUri);
            IRandomAccessStream stream = await f.OpenAsync(FileAccessMode.Read);
            return stream.GetInputStreamAt(0);
        }
        catch (Exception)
        {
            System.Diagnostics.Debug.WriteLine("Invalid URI");
        }
        return null;
    }
}

Thanks! Your answer let me to research additional info on IUriToStreamResolver. BTW, I am writing a share target, which GetHtmlFormatAsync would return me a string from the Share Source. Since NavigateToString dont have the ability to read local image. Does that mean I have to first write the HTML fragment I received from GetHtmlFormatAsync into a file e.g. example.html, and then proceed to use BuildLocalStreamUri and NavigateToLocalStreamUri? — freshWoWer, Apr 17 '17 at 09:02
I have successfully read local images by using the `ms-appx-web` protocol. Try the following code: `string htmlContent = "

Here is a local image: .
"; myWebView.NavigateToString(htmlContent);` — Arnaud Develay, Apr 19 '17 at 08:55
You can also store the image in the html string itself by encoding them into base64 string. Check this answer for details: `http://stackoverflow.com/questions/10363174/use-local-images-in-webbrowser-control#34276669`. If you need to parse HTML content to modify the links, I suggest you to use HTMLAgilityPack which helped me a lot in similar functionalities. — Arnaud Develay, Apr 19 '17 at 08:57

Display resource map image in UWP WebView Control

1 Answers1