在 UWP WebView 控件中显示本地图像答案

【问题标题】：Display local images in UWP WebView control在 UWP WebView 控件中显示本地图像
【发布时间】：2017-05-15 00:55:48
【问题描述】：

我需要编写代码，将一些 HTML（通过其他方式从外部源接收）加载到 WebView 中并显示此 HTML 中引用的图像。这些图像将存储在本地 Windows.Storage.ApplicationData.Current.LocalFolder 的某个位置。

use local image to display in webview for windows phone 8.1 或 Use local images in Webbrowser control 的建议都不适合我。如果我用 web.NavigateToString(html) 加载这样的 HTML：

<html><head></head><body>A <img src="file:///c:/Users/idh/AppData/Local/Packages/d783af9f-88eb-42f5-ab0f-abb025f32baa_5cy2zb9g43kb2/LocalState/folder/image001.jpg"> B</body></html>

我只显示 A B。我尝试了斜杠和反斜杠，文件后的双斜杠和三斜杠：，ms-appx：和相对路径而不是文件：等。图像永远不会显示。同时，如果我将它保存在 HTML 文件中并在我的应用程序之外打开它，它会显示得很好。我还成功保存并读取了这些文件（它们实际上出现在该文件夹中，因为我的应用程序创建了它们，因此未经授权的访问不是问题）。 package.manifest 确实包含专用网络。

我最好不要使用 base64 嵌入、自定义 uri 解析器和其他特殊技术，因为我不是应用程序的实际开发人员。我创建了一个获取 HTML 并将图像保存到本地存储的库，现在我需要演示一种易于使用的方法来可视化 WebView 中存储的内容，就像我之前对普通 .NET 框架所做的那样。 IE。实际上，我正在为使用我的库的开发人员编写一个示例，然后这些人将使用我的示例来处理这些 HTML 和图像。

作为最后的手段，我最终可以为我的示例的 UWP 版本编写 base64 或自定义解析器（而对于其他平台，如普通 .NET 框架，相同的过程要容易得多）。但我想至少确保在源 HTML 中为图像选择正确 URL 的直接路径是不可能的，而且我不会遇到这样的情况：我写了一些相当复杂的东西，然后在 UWP 应用程序中经验丰富的人揭示了这一点我过度设计了一些东西。 IE。一些专家意见“不，这在 UWP 中是不可能的，您必须使用 base64 嵌入或自定义 URI 解析”也对我有用。

【问题讨论】：

据我所知，你必须使用 UriResolver code.msdn.microsoft.com/windowsapps/… 这是当时唯一的选择，不要以为有什么新东西出现
样本中的位置很可能不是 valld。在您的 web 视图中，如果它在本地数据 (ApplicationData.Local) 中，则可以通过 ms-appdata:///local 引用本地文件；如果在 appx 的内容中，则可以通过 ms-appx:/// 引用。
我确实没有尝试过 ms-appdata：（并且不知道该选项），但会试一试。谢谢！
不，它没有与 ms-appdata 一起工作。似乎我将不得不接受 base64 编码或自定义解析（我从一开始就知道但想避免的选项）。

标签： c# webview uwp

【解决方案1】：

尽管NavigateToString 支持引用外部文件（如 CSS、脚本、图像和字体）的内容。但它仅支持使用ms-appx-web 方案的应用程序包中的内容，以及使用http 和https URI 方案的Web 内容。它不适用于位于应用程序本地文件夹中的资产。所以在这里使用file:///、ms-appdata:/// 或ms-appx:/// 方案将不起作用。

要实现您想要的，您可以使用Base64 编码图像 或自定义 URI 解析器。此外，我认为您可以将 html 字符串存储到存储这些图像资产的同一子文件夹下的文件中。在 html 中，您可以使用相对 URI 来引用这些资产，例如 my previous answer 中的内容。然后使用Navigate 方法和使用ms-appdata scheme 的Uri。例如：

var html = "<html><head></head><body>A <img src=\"image001.jpg\"> B</body></html>";

var folder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("folder", CreationCollisionOption.OpenIfExists);
var file = await folder.CreateFileAsync("html.html", CreationCollisionOption.OpenIfExists);
await FileIO.WriteTextAsync(file, html);

webView.Navigate(new Uri("ms-appdata:///local/folder/html.html"));

【讨论】：

谢谢！这个方法奏效了！当 HTML 文件保存在本地并且图像路径是相对于该路径时。