在UWP WebView控件中顯示本地圖像

我需要編寫代碼來將一些HTML（通過其他方式從外部源接收）加載到WebView中並顯示在此HTML中引用的圖像。這些圖像將存儲在Windows.Storage.ApplicationData.Current.LocalFolder中的某處。在UWP WebView控件中顯示本地圖像

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>

我只得到一個B顯示。我在文件後嘗試了斜槓和反斜槓，雙斜槓和三斜槓：，ms-appx：和相對路徑而不是文件：等等。圖像永遠不會顯示。同時，如果我將它保存在HTML文件中，並在我的應用程序之外打開它，它會顯示正常。我還成功保存並閱讀這些文件（它們實際上出現在該文件夾中，因爲我的應用程序創建了它們，因此未經授權的訪問不成問題）。 package.manifest包括專用網絡。

我最好不要使用與base64，自定義uri解析器和其他特殊技術的嵌入，因爲我不是應用程序的實際開發人員。我製作了一個獲取HTML並將圖像保存到本地存儲的庫，現在我需要演示一個易於使用的方法來在WebView中可視化存儲的內容，就像我以前爲普通的.NET框架所做的那樣。即我實際上是爲我的圖書館的用戶編寫了一個樣本，然後這些人將使用我的樣本來處理這些HTML和圖像。

作爲最後的手段，我最終可以爲我的示例的UWP版本編寫base64或自定義解析器（而對於像普通.NET框架這樣的其他平臺，相同的過程則更容易）。但我想至少確定一下，爲源圖像中的圖像選擇合適的URL的直接路徑是不可能的，而且我不會因爲我寫了一些相當複雜的東西而後來在UWP應用程序中有經驗的人揭示了這種情況我過度設計了一些東西。即一些專家意見「不，在UWP中不可能，你必須使用base64嵌入或自定義URI解析」也適用於我。

來源

2016-12-30 Alex

據我所知，你必須使用的URIResolver https://code.msdn.microsoft.com/windowsapps/Windows-Store-Apps-How-to-8073b0da它是唯一的選擇回那麼，不要認爲任何新東西出現 – RTDev

位置，因爲你的樣本很可能不valld。在webview中，如果本地文件位於本地數據（ApplicationData.Local）中，或者通過ms-appx：///如果它位於appx內容中，則可以通過ms-appdata：/// local引用本地文件。 –

我確實沒有嘗試ms-appdata :(並沒有意識到這個選擇），但是，它會試一試。謝謝！ – Alex

儘管NavigateToString支持引用外部文件（如CSS，腳本，圖像和字體）的內容。但它僅支持使用ms-appx-web方案的應用程序包中的內容以及使用http和https URI方案的網頁內容。它無法與位於應用程序本地文件夾中的資產一起使用。所以使用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"));

來源

2017-01-02 08:21:30

謝謝！這種方法奏效！當HTML文件保存在本地並且圖像路徑相對於該路徑時。 – Alex

在UWP WebView控件中顯示本地圖像

回答

相關問題