在UWP WebView控件中显示本地图片

Question

在UWP WebView控件中显示本地图片

6

我需要编写代码，将从其他途径接收到的HTML加载到WebView中，并显示在此HTML中引用的图片。这些图片将在Windows.Storage.ApplicationData.Current.LocalFolder中本地存储。

在使用本地图像在windows phone 8.1中显示webview或在Webbrowser控件中使用本地图像的建议均不适用于我。如果我使用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 被显示。我尝试使用反斜杠、双斜杠和三斜杠，以及 file:、ms-appx: 和相对路径代替 file: 等方式。图片从未被显示。同时，如果我将其保存在 HTML 文件中并在我的应用程序之外打开它，它就能正常显示。我也成功地保存和读取了这些文件（它们实际上出现在那个文件夹中，因为我的应用程序创建了它们，所以未经授权的访问不是问题）。package.manifest 中包括私有网络。

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

作为最后的手段，我可能会为 UWP 版本的示例编写 base64 或自定义解析器（而对于其他平台，如普通的 .NET 框架，相同的过程要简单得多）。但我至少想确定在源 HTML 中选择适当的图像 URL 的直接路线不可行，我不会陷入这样一种情况：我写了一些相当复杂的东西，然后有经验的 UWP 应用程序专家揭示我过度设计了。也就是说，一些专家意见“不，这在 UWP 中是不可能的，你必须使用 base64 嵌入或自定义 URI 解析”对我也起作用。

- Alex

据我所知，您必须使用UriResolver https://code.msdn.microsoft.com/windowsapps/Windows-Store-Apps-How-to-8073b0da 那时它是唯一的选择，我认为没有出现任何新东西。 - RTDev

1

你的位置很可能无效。在你的 WebView 中，如果文件在本地数据（ApplicationData.Local）中，可以通过 ms-appdata:///local 引用本地文件；如果文件在应用程序包内容中，则可以通过 ms-appx:/// 引用。 - Dave Smits

我确实还没有尝试过ms-appdata:(也不知道有这个选项)，但我会试一下的。谢谢！ - Alex

不，使用ms-appdata并没有成功。看来我只能使用base64编码或自定义解析（这些选项我一开始就知道但想避免使用）。 - Alex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jay Zuo · Accepted Answer

尽管 NavigateToString 支持包含对 CSS、脚本、图像和字体等外部文件的引用的内容。但是它仅支持使用 ms-appx-web 方案的应用程序包中的内容，以及使用 http 和 https URI 方案的 Web 内容。它无法处理位于应用程序本地文件夹中的资产。因此，在此处使用 file:///、ms-appdata:/// 或 ms-appx:/// 方案将不起作用。

为了实现您想要的效果，您可以使用 Base64 编码的图像或自定义 URI 解析器。此外，我认为您可以将 HTML 字符串存储到存储这些图像资产的同一子文件夹下的文件中。在 HTML 中，您可以使用相对 URI 引用这些资产，就像我的先前答案中所示。然后，使用使用 Navigate 方法和使用 ms-appdata 方案的 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"));