locked
how to load image on webview

    Question

  • hi,

        I have downloaded images to my application folder(ms-appdata:///local/),I have to load these images to webview using navigateToString method.i can load base 64 and ms-appx-web images but couldn't able to load images from this path("ms-appdata:///local/")

    Any help would be greatly appreciated

    Monday, June 09, 2014 9:53 AM

Answers

  • You'll have to use WebView.NavigateToLocalStreamUri to get this to work. Here's a sample:

    protected override async void OnNavigatedTo(NavigationEventArgs e)
            {
                Uri MyUrl = MyWebView.BuildLocalStreamUri("MyContent", "/my.html");
                StreamUriWinRTResolver MyResolver = new StreamUriWinRTResolver();
                MyWebView.NavigateToLocalStreamUri(MyUrl, MyResolver);
            }
        }
    
        public sealed class StreamUriWinRTResolver : IUriToStreamResolver
        {
            public IAsyncOperation<IInputStream> UriToStreamAsync(Uri uri)
            {
                if (uri == null)
                {
                    throw new Exception();
                }
                string path = uri.AbsolutePath;
                return GetContent(path).AsAsyncOperation();
            }
    
            private async Task<IInputStream> GetContent(string URIPath)
            {
                // We use a package folder as the source, but the same principle should apply
                // when supplying content from other locations
                try
                {
                    Uri localUri = new Uri("ms-appdata:///local/content" + URIPath);
                    StorageFile f = await StorageFile.GetFileFromApplicationUriAsync(localUri);
                    IRandomAccessStream stream = await f.OpenAsync(FileAccessMode.Read);
                    return stream.GetInputStreamAt(0);
                }
                catch (Exception) { throw new Exception("Invalid path"); }
            }
        }


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, June 10, 2014 6:02 PM
    Moderator

All replies

  • I worked for me. I used this code:

    CS:

     protected override void OnNavigatedTo(NavigationEventArgs e)
    {
      MyWebView.Navigate(new Uri("ms-appdata:///local/content/my.html"));
    }
    
    
    HTML:
    <html>
    <head>
    </head>
    <body>
    Picture of kitten:<br>
    <img src="kitten.jpg">
    </body>
    </html>



    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, June 09, 2014 7:15 PM
    Moderator
  • its not working on navigateToString Method,.how to do it on navigateToString()?
    Tuesday, June 10, 2014 4:20 AM
  • Why are you using NavigateToString?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, June 10, 2014 12:33 PM
    Moderator
  • i need to capture some html content not whole html page
    Tuesday, June 10, 2014 1:01 PM
  • You'll have to use WebView.NavigateToLocalStreamUri to get this to work. Here's a sample:

    protected override async void OnNavigatedTo(NavigationEventArgs e)
            {
                Uri MyUrl = MyWebView.BuildLocalStreamUri("MyContent", "/my.html");
                StreamUriWinRTResolver MyResolver = new StreamUriWinRTResolver();
                MyWebView.NavigateToLocalStreamUri(MyUrl, MyResolver);
            }
        }
    
        public sealed class StreamUriWinRTResolver : IUriToStreamResolver
        {
            public IAsyncOperation<IInputStream> UriToStreamAsync(Uri uri)
            {
                if (uri == null)
                {
                    throw new Exception();
                }
                string path = uri.AbsolutePath;
                return GetContent(path).AsAsyncOperation();
            }
    
            private async Task<IInputStream> GetContent(string URIPath)
            {
                // We use a package folder as the source, but the same principle should apply
                // when supplying content from other locations
                try
                {
                    Uri localUri = new Uri("ms-appdata:///local/content" + URIPath);
                    StorageFile f = await StorageFile.GetFileFromApplicationUriAsync(localUri);
                    IRandomAccessStream stream = await f.OpenAsync(FileAccessMode.Read);
                    return stream.GetInputStreamAt(0);
                }
                catch (Exception) { throw new Exception("Invalid path"); }
            }
        }


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, June 10, 2014 6:02 PM
    Moderator
  • we are using windows 8.1 Javascript Cartoon Illustration apps for android,IOS and windows 8.1 so we choose javscript to use common for this 3 this will success in other 2, same manner windows 8.1 to success except the screen shot we need to take a screen shot of the particular area in the screen so only way is to load the content into webview and take a screen shot.

    In x-ms-webview we used navigateToString just pass our html work in to the webview like this

    stringHtml = "<div class='debug' >Test <img style='border:solid 1px green;'  src='ms-appdata:///local/screenshot_06042014_125833.png' /></div>";
                    webviewControl.navigateToString(stringHtml);
    please give best suggestion to solve this.

    Thursday, June 19, 2014 3:27 AM