windows-8 - Windows 8 RT - 动态生成 html 不呈现图像

Question

在 LocalState 目录中时，我无法在网页上加载图像。

具体来说，当文件路径引用 LocalState 目录时尝试启动网页时似乎存在安全问题。

当我右键单击 html 文件并在 Visual Studio 中的浏览器中查看它时，网页确实加载了图像。

我已将 src 标记的路径更改为: src="ms-appdata:///Local/Logo.jpeg"
它不起作用。

帮我...

示例代码

public static async Task Update(WebView webview, IStorageFile file) { 
  var html = await Windows.Storage.PathIO.ReadTextAsync(file.Path);
  webview.NavigateToString(html);
 } 

Answer 1

NavigateToString 方法不适用于指向 LocalData 文件夹中图像的标签。 (反正我记得)。事实上，NavigateToString 也会破坏 JavaScript 和 CSS 链接。

服务器上的图像

一种解决方案是将源更改为指向网络服务器而不是本地数据。不过，我不确定它是否适用于您的应用场景。

图像和 HTML 作为内容

第二种选择是将您的 html 和图像文件作为内容添加到您的应用程序中并使用

WebView1.Navigate(new Uri("ms-appx-web:///assets/SampleHtmlPage.html"));

加载 HTML。

正在处理的 HTTP 服务器

这是在应用程序中使用自定义 HTTP 服务器来处理问题的解决方案。

Loading Local HTML Content in Metro WebView (Windows 8)

Base 64 编码图像

最后，还有另一种使用 Base64 编码 LocalData 文件夹中图像的解决方案。

internal async void MakeHtmlString()
{
  StorageFile imageFile; // get image file here.

  var html = 
     string.Format("<div><img src='data:image/png;base64,{0}'", 
                    await GetImageBase64(imageFile));
}

internal async Task<string> GetImageBase64(StorageFile imageFile)
{
  var imageStream = await imageFile.OpenAsync(FileAccessMode.Read);
  var inputStream = imageStream.GetInputStreamAt(0);
  var dataReader = new DataReader(inputStream);

  var dataResults = await dataReader.LoadAsync((uint)imageStream.Size);
  var bytes = new byte[dataResults];
  dataReader.ReadBytes(bytes);
  return Convert.ToBase64String(bytes);
}

最后一种方法适用于图像，但不适用于 CSS 文件。