Windows 8 RT - Dynamically generating html does not render images

Question

I am unable to get images loaded on a webpage when in the LocalState directory.

Specifically, there appears to be a security issue when attempting to launch the webpage when the file path is referencing the LocalState directory.

The webpage DOES load with images when I right-click the html file and view it in the browser within Visual Studio.

I have changed the path of the src tag to: src="ms-appdata:///Local/Logo.jpeg" It doesn't work.

Help me...

Example code

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

Answer 1

The NavigateToString method doesn't work with tags that point to images in the LocalData folder. (as far as I recall anyway). In fact NavigateToString also breaks JavaScript and CSS links.

Images on Server

One solution, is to change your source to point to a network server instead of localdata. I'm not sure it that works for your app scenario though.

Images and HTML as content

The second choice is to add your html and image files as content to your app and use

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

to load the HTML.

In Process HTTP Server

Here is a solution that uses a custom HTTP server in the app to handle the issues.

Loading Local HTML Content in Metro WebView (Windows 8)

Base 64 encoded image

Finally, there is another solution using Base64 encoding of your images in the LocalData folder.

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);
}

This last approach works for images, but not for CSS files.