我正在开发一个同时支持 Windows 8.1 和 10 的 UWP 应用程序。我有一个 WebView，我使用 NavigateToString 设置了一些在代码中生成的 html。在那里我需要显示 Appdata 文件夹中的一些图像，例如AppData\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\LocalState\c9dfd4d5-d8a9-41c6-bd08-e7f4ae70e423\4f31f54f-1b5b\Imageb-4812-94638-8p>ea

我尝试使用 ms-appdata:///local/、 file:///、正斜杠、反斜杠 img src 中的所有内容。但是他们都没有加载图像。

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

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

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

例如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 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 拥有一个 Web 上下文，它不能访问 WinRT API 或使用 WinRT Scheme。

但您可以将图像转换为 Base64 DataUri并将其传递给您的 WebView 。图片转Base64 DataUri详见Reading and Writing Base64 in the Windows Runtime .

看完博客后，我做了一个basic demo并成功将图像传递给 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;
}

主页.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>

这是输出:

关于c# - UWP 应用程序在 WebView 中显示本地文件夹中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38831434/