C# UWP应用程序在WebView中显示本地文件夹中的图像

我正在开发一个支持Windows8.1和10的UWP应用程序。在这里，我有一个WebView，我使用NavigateToString在代码中为它设置了一些html。在那里，我需要显示Appdata文件夹中的一些图像，例如Appdata\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991\U egahdtqjx9ddg\LocalState\c9dfd4d5-d8a9-41c6-bd08-e7f4ae70e423\4f31f54f-1b5b-4812-9463-ba23ea7988a0\images

我试过使用ms-appdata:///local/ ，文件：///，正斜杠，反斜杠在img src中删除所有内容。但他们都没有加载图像

由于上面的路径太长，我在AppData\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\LocalState\1.png上有一个示例图像，并试图以不同的方式访问它，但它们都没有在web视图中显示该图像。但我可以通过浏览器访问它。 如果我在下面的代码中为img src提供一个http url，它就会工作

请告诉我如何在WebView中显示LocalState文件夹中的图像

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);

stringfigures=“Figure:thumb\u IMG\u 0057\u 1024”；
procedureWebView.NavigateToString（图）；

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>";

stringfigures=“Figure:thumb\u IMG\u 0057\u 1024”；

由于上面的路径太长，我在AppData\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\LocalState\1.png上有一个示例图像，并试图以不同的方式访问它，但它们都没有在web视图中显示该图像

WebView持有一个web上下文，该上下文无权访问WinRT API或使用WinRT方案

但您可以将图像转换为Base64并将其传递给您的webview。有关将图片转换为Base64 DataUri的详细信息，请参阅

阅读完博客后，我做了一个简单的修改，并成功地将图像传递到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;
}

专用异步任务ToBase64（字节[]图像，单位高度，单位宽度，双dpiX=96，双dpiY=96）
{
var encoded=新的InMemoryRandomAccessStream（）；
var encoder=await BitmapEncoder.CreateAsync（BitmapEncoder.PngEncoderId，encoded）；
编码器.SetPixelData（BitmapPixelFormat.Bgra8，BitmapAlphaMode.Straight，height，width，dpiX，dpiY，image）；
等待编码器。FlushAsync（）；
编码的Seek（0）；
var bytes=新字节[encoded.Size]；
wait encoded.AsStream（）.ReadAsync（字节，0，字节.长度）；
返回Convert.tobase64字符串（字节）；
}
专用异步任务ToBase64（可写位图）
{
var bytes=bitmap.PixelBuffer.ToArray（）；
返回wait ToBase64（字节，（uint）bitmap.PixelWidth，（uint）bitmap.PixelHeight）；
}
私有异步void myBtn\u单击（对象发送方，路由目标）
{
StorageFile myImage=等待GetFileAsync（）；
ImageProperties=await myImage.properties.GetImagePropertiesAsync（）；
WriteableBitmap bmp=新的WriteableBitmap（（int）properties.Width，（int）properties.Height）；
SetSource（等待myImage.OpenReadAsync（））；
字符串dataStr=wait ToBase64（bmp）；
字符串fileType=myImage.fileType.Substring（1）；
String str=“Figure:thumb\u IMG\u 0057\u 1024”；
myWebView.NavigateToString（str）；
}
专用异步任务GetFileAsync（）
{
StorageFile myImage=wait ApplicationData.Current.LocalFolder.GetFileAsync（“myImage.jpg”）；
返回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>

单击我以加载WebView

以下是输出：