Use local images in Webbrowser control

Question

I'm using a Webbrowser Control in my Wp7 app, but I can't seem to put images that are in the App directory, in the webbrowser.

I've put some images in a folder in the same directory as the .cs and .xaml files. Now I try to put them in the webbrowser control, but I can't seem to get this to work.

<img src="images/photo.jpg"/>
<img src="/images/photo.jpg"/>

The two above obviously don't work, my guess is that it should be something like this:

<img src="/SilverlightApplication;component/photo.jpg"/>

"SilverlightApplication" and "component" should be replaced by something else, but I don't know what :(

Answer 1

You will need to store your images in the Isolated Storage and then display the images from there. I have put together a sample that you can download from the following location :-

www.smartmobiledevice.co.uk/projects/webbrowserimagesample.zip

This is based on the MSDN article How to: Display Static Web Content Using the WebBrowser Control for Windows Phone.

Answer 2

On Windows Phone 8, where some WinRT classes are available, one can get a filesystem path of your app's isolated storage. So the absolute URL to a file in IsoStorage would be:

string URL = "file://" +
    Windows.Storage.ApplicationData.Current.LocalFolder.Path +
    "\\folder\\filename.png";

The WebBrowser control takes such URLs in a NavigateToString()'d HTML alright. Or you can designate IsoStorage as base and use relative URLs throughout. isostore: URLs don't work, I've tried. Neither do ms-appx://local/.

For completeness' sake, you can very similarly get a filesystem path to your app's resources. That'd be Windows.ApplicationModel.Package.Current.InstalledLocation.Path.