WebViewでのローカルコンテンツ表示に嵌る

UWPアプリのWebViewでローカル画像を表示させようとして嵌った。

プロジェクトのAssetsフォルダに置いて一緒にパッケージングした画像なら

<img src="test.png"/>

といった形で表示できるが、ローカルなフォルダ(AppDataなど)にあるファイルが表示できない。

AppDataへの参照はms-appdataプロトコルを使え的な情報があったので

<img src="ms-appdata:///local/test/test.png" />

を試してみるも表示されず。WebView内でms-appdataは認識されない模様。

 かといってfile://やC:～といった形で絶対パスを指定してもNG。

かなりの試行錯誤を経て、Navigateの時点でローカルHTMLを開けば、そのファイルからの相対パスで画像ファイルを表示できることを発見した。

具体的には

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

でローカルHTMLを表示させて、

local.htmでは普通に<img src="local.png"/>とすればOK。

ちなみにms-appdata:///localの実際のフォルダは

C:\Users\[User]\AppData\Local\Packages\[PackageId]\LocalState

になるが、これは

var folder = Windows.Storage.ApplicationData.Current.LocalFolder;

Debug.WriteLine(folder.Path);

 で取得できる。

あと罠なのはms-appdata:///localのあとにサブフォルダが必要なこと。

ms-appdata:///local/test.htmlだとダメで、ms-appdata:///local/folder/test.htmlとする。

これはWebViewのドキュメントをよく見ると書いてあった。いろいろググるより、公式ドキュメントをしっかり読み込まないといかんと反省。

The WebView support for this scheme requires you to place your content in a subfolder under the local or temporary folder. This enables navigation to URIs such as ms-appdata:///local/folder/file.html and ms-appdata:///temp/folder/file.html .