UWP app show image from the Local folder in the WebView

Question

I am working on a UWP app that supports both Windows 8.1 and 10. There I have a WebView to which I set some html generated in the code using NavigateToString. There I need to show some images which are in the 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, back slashes everything in the img src. But none of them are loading the images.

Since the above path is too long, I have a sample image at AppData\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\LocalState\1.png and trying to access it in different ways and none of them are showing that image in the web view. But I can access that from a browser. And if I give a http url for the img src in the below code it works.

Please let me know how I can show images in the LocalState folder in a 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>";

Elvis Xia - MSFT Elvis Xia - MSFT · Accepted Answer · 2016-08-09T08:10:20

Since the above path is too long, I have a sample image at AppData\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\LocalState\1.png and trying to access it in different ways and none of them are showing that image in the web view.

WebView holds a web context,which won't have access to WinRT API or using WinRT Scheme.

But you can convert the Image to Base64 DataUri and pass it to your webview. For details about converting a picture to Base64 DataUri you can refer to Reading and Writing Base64 in the Windows Runtime.

After reading the Blog, I made a basic demo and successfully pass the image to 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 to Load WebView</Button>
    </StackPanel>
</Grid>

And here is the output:

UWP app show image from the Local folder in the WebView

1 Answers