在 UWP WebView 控件中显示本地图像 [英] Display local images in UWP WebView control
问题描述
我需要编写代码，将一些 HTML(通过其他方式从外部源接收)加载到 WebView 中并显示此 HTML 中引用的图像.这些图像将本地存储在 Windows.Storage.ApplicationData.Current.LocalFolder 中.
I need to write the code which will load some HTML (received from external source by other means) into WebView and display images referenced in this HTML. These images will be stored locally somewhere in Windows.Storage.ApplicationData.Current.LocalFolder.
使用中的任何建议在 Windows Phone 8.1 的 webview 中显示本地图像 或 在 Webbrowser 中使用本地图像控制 为我工作.如果我使用 web.NavigateToString(html) 加载这样的 HTML:
Neither of suggestions at use local image to display in webview for windows phone 8.1 or Use local images in Webbrowser control work for me. If I load such HTML with web.NavigateToString(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 确实包括专用网络.
I get just A B displayed. I tried slashes and backslashes, double and triple slashes after file:, ms-appx: and relative paths instead of file:, etc. The image never gets displayed. At the same time, if I save this in HTML file and open it outside of my app, it's displayed fine. I also successfully save and read these files (they are actually appeared in that folder because my app created them so unauthorized access is not an issue). package.manifest does include Private networks.
我最好不要使用 base64 嵌入、自定义 uri 解析器和其他特殊技术，因为我不是应用程序的实际开发人员.我制作了一个获取 HTML 并将图像保存到本地存储的库，现在我需要演示一种易于使用的方法来可视化 WebView 中存储的内容，就像我之前对普通 .NET 框架所做的那样.IE.实际上，我正在为使用我的库的开发人员编写示例，然后这些人将使用我的示例来处理这些 HTML 和图像.
I'd better not use embedding with base64, custom uri resolver and other special techniques because I'm not the actual developer of the application. I make a library which gets HTML and saves images to local storage and now I need to demonstrate an easy to use method to visualize the stored content in WebView like I earlier did for normal .NET framework. I.e. I'm actually writing a sample for developers who are users of my library and these folks will then use my sample to deal with this HTML and images.
作为最后的手段，我最终可以为我的示例的 UWP 版本编写 base64 或自定义解析器(而对于其他平台，如普通的 .NET 框架，相同的过程要容易得多).但我想至少确保在源 HTML 中为图像选择正确 URL 的直接途径是不可能的，而且我不会遇到这样的情况:我写了一些非常复杂的东西，然后有人在 UWP 应用程序中有经验的人透露我过度设计了一些东西.IE.一些专家意见不，这在 UWP 中是不可能的，你必须使用 base64 嵌入或自定义 URI 解析"也适用于我.
As the last resort, I can end up writing base64 or custom resolver for UWP version of my sample (while for other platforms like normal .NET framework the same procedure is much easier). But I want to at least be sure that the direct route of selecting proper URLs for images in the source HTML is not possible and I won't end up with situation where I wrote some quite complicated stuff and then someone experienced in UWP apps reveals that I over-engineered things. I.e. some expert opinion "no, it's not possible in UWP and you MUST use base64 embedding or custom URI resolving" will work for me too.
推荐答案
虽然 NavigateToString 支持引用外部文件(如 CSS、脚本、图像和字体)的内容.但它仅支持使用ms-appx-web 方案的应用包中的内容，以及使用http 和https 的网页内容URI 方案.它无法处理位于应用程序本地文件夹中的资产.所以使用 file:///、ms-appdata:/// 或 ms-appx:/// 方案在这里不起作用.
Although NavigateToString supports content with references to external files such as CSS, scripts, images, and fonts. But it only supports content in the app package using the ms-appx-web scheme, and web content using the http and https URI schemes. It can't work with assets located in the apps local folder. So using file:///, ms-appdata:/// or ms-appx:/// scheme won't work here.
要实现您想要的效果，您可以使用Base64 编码图像或自定义 URI 解析器.此外，我认为您可以将 html 字符串存储到存储这些图像资产的同一子文件夹下的文件中.在 html 中，您可以使用相对 URI 来引用这些资产，例如 我之前的答案 中的内容.然后使用 Navigate 方法与 Uri 使用ms-appdata 方案.例如:
To achieve what you want, you can use Base64 encoded images or custom URI resolver. Also I think you can store the html string to a file under the same subfolder that stores these image assets. In the html, you can use relative URI to reference these assets like what in my previous answer. And then use the Navigate method with a Uri that uses the ms-appdata scheme. For example:
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"));
这篇关于在 UWP WebView 控件中显示本地图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
