c# - UWP app show image from the Local folder in the WebView -

i working on uwp app supports both windows 8.1 , 10. there have webview set html generated in code using navigatetostring. there need show images in appdata folder e.g. appdata\local\packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\localstate\c9dfd4d5-d8a9-41c6-bd08-e7f4ae70e423\4f31f54f-1b5b-4812-9463-ba23ea7988a0\images

i have tried using ms-appdata:///local/ , file:/// , forward slashes, slashes in img src. none of them loading images.

since above path long, have sample image @ appdata\local\packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\localstate\1.png , trying access in different ways , none of them showing image in web view. can access browser. , if give http url img src in below code works.

please let me know how can show images in localstate folder in webview.

e.g 1.

string figures = "<figure><img src=\"ms-appdata:///local/1.png\" alt =\"aaa\" height=\"400\" width=\"400\"/><figcaption>figure  : thumb_img_0057_1024</figcaption></figure>"; procedurewebview.navigatetostring(figures); 

e.g. 2

string  figures = "<figure><img src='file:///c://users//xxx//appdata//local//packages//1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg//localstate//1.png' alt=\"thumb_img_0057_1024\" height=\"100\" width=\"100\"/><figcaption>figure  : thumb_img_0057_1024</figcaption></figure>"; 

since above path long, have sample image @ appdata\local\packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\localstate\1.png , trying access in different ways , none of them showing image in web view.

webview holds web context,which won't have access winrt api or using winrt scheme.

but can convert image base64 datauri , pass webview. details converting picture base64 datauri can refer reading , writing base64 in windows runtime.

after reading blog, made basic demo , pass image webview. mainpage.xaml.cs:

private async task<string> tobase64(byte[] image, uint height, uint width, double dpix = 96, double dpiy= 96) {     var encoded = new inmemoryrandomaccessstream();     var encoder = await bitmapencoder.createasync(bitmapencoder.pngencoderid, encoded);     encoder.setpixeldata(bitmappixelformat.bgra8, bitmapalphamode.straight, height, width, dpix, dpiy, image);     await encoder.flushasync();     encoded.seek(0);      var bytes = new byte[encoded.size];     await encoded.asstream().readasync(bytes, 0, bytes.length);     return convert.tobase64string(bytes); }  private async task<string> tobase64(writeablebitmap bitmap) {     var bytes = bitmap.pixelbuffer.toarray();     return await tobase64(bytes, (uint)bitmap.pixelwidth, (uint)bitmap.pixelheight); }  private async void mybtn_click(object sender, routedeventargs e) {      storagefile myimage = await getfileasync();      imageproperties properties = await myimage.properties.getimagepropertiesasync();     writeablebitmap bmp = new writeablebitmap((int)properties.width, (int)properties.height);     bmp.setsource(await myimage.openreadasync());     string datastr=await tobase64(bmp);     string filetype = myimage.filetype.substring(1);     string str = "<figure><img src=\"data:image/"+myimage.filetype+";base64,"+datastr+"\" alt =\"aaa\" height=\"400\" width=\"400\"/><figcaption>figure  : thumb_img_0057_1024</figcaption></figure>";      mywebview.navigatetostring(str); }  private async task<storagefile> getfileasync() {     storagefile myimage = await applicationdata.current.localfolder.getfileasync("myimage.jpg");     return myimage; } 

mainpage.xaml:

<grid background="{themeresource applicationpagebackgroundthemebrush}">     <stackpanel verticalalignment="center">         <webview name="mywebview" width="500"  height="500" ></webview>         <button name="mybtn" click="mybtn_click">click me load webview</button>     </stackpanel> </grid> 

and here output: