在 UWP WebView 控件中显示资源地图图像

Question

在这个link

它向我们展示了如何通过使用 ResourceMap 将 HTML 与文本和图像的内容共享出去。

但是对应的article 并没有向我们展示如何阅读它并正确地将其放入webview。

我知道如何取回资源图，但不知道如何最好地将其放入WebView。

this.sharedResourceMap = await this.shareOperation.Data.GetResourceMapAsync();
foreach (KeyValuePair<string, RandomAccessStreamReference> item in this.sharedResourceMap)
{
    ResourceMapValue.Text += "\nKey: " + item.Key;
}

Item.Key 类似于 ms-appx:///Assets/Logo.png

Answer 1

您应该利用 IUriToStreamResolver 类。

在以下示例中，我加载了位于 Assets 文件夹中的 HTML 文件 (example.html)。 Assets 文件夹还包含 HTML 文件的所有图像。 应该重写 IUriToStreamResolver 的 GetContent 方法，以将任何对 HTML 文件中指定的 URI（例如 ）的请求转换为本地 uri 路径。在您的情况下，您可能需要调整 GetContent 以检索资源映射存储的文件。

public sealed partial class WebViewLocalImage : Page
{
    public WebViewLocalImage()
    {
        this.InitializeComponent();
        Loaded += MainPage_Loaded;
    }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        var uri = this.myWebView.BuildLocalStreamUri("InternalAssets", "example.html");
        this.myWebView.NavigateToLocalStreamUri(uri, new StreamUriResolver());
    }
}

public sealed class StreamUriResolver : IUriToStreamResolver
{
    public IAsyncOperation<IInputStream> UriToStreamAsync(Uri uri)
    {
        string path = uri.AbsolutePath;
        return GetContent(path).AsAsyncOperation();
    }

    private async Task<IInputStream> GetContent(string URIPath)
    {
        try
        {
            Uri localUri = new Uri("ms-appx:///Assets/" + URIPath);
            StorageFile f = await StorageFile.GetFileFromApplicationUriAsync(localUri);
            IRandomAccessStream stream = await f.OpenAsync(FileAccessMode.Read);
            return stream.GetInputStreamAt(0);
        }
        catch (Exception)
        {
            System.Diagnostics.Debug.WriteLine("Invalid URI");
        }
        return null;
    }
}