Use local images in a Webbrowser control

Question

I use the Webbrowser control in my Wp7 application, but I cannot put images that are in the application directory in a web browser.

I put some images in a folder in the same directory as the .cs and .xaml files. Now I am trying to put them in a webbrowser control, but I cannot get this to work.

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

The two above obviously do not work, I assume it should be something like this:

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

"SilverlightApplication" and "component" should be replaced with something else, but I do not know what: (

Answer 1

You will need to save the images in isolated storage and then display the images from there. I have collected 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

In Windows Phone 8, where some WinRT classes are available, you can get the file system path to the isolated application store. Thus, the absolute file URL in IsoStorage will be as follows:

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

The WebBrowser control uses such URLs in the format of NavigateToString() 'd HTML. Or you can designate IsoStorage as the base and use relative URLs all over. isostore: urls not working i tried. Do not do ms-appx://local/ .

For completeness, you can also get the file system path to the resources of your application. This will be Windows.ApplicationModel.Package.Current.InstalledLocation.Path .

Answer 3

It’s good that you can use dynamic images by combining the above sample application for the example, update the array dynamically,

 string[] files = { "readme.htm", "desert.jpg", "sample.jpg" }; 

and before you write in isolated, you can delete the existing

  private void SaveFilesToIsoStore() { //These files must match what is included in the application package, //or BinaryStream.Dispose below will throw an exception. string[] files = { "readme.htm", "desert.jpg", "sample.jpg" }; IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication(); if(isoStore.FileExists(files[0])) { isoStore.DeleteFile(files[0]); } foreach (string f in files) { StreamResourceInfo sr = Application.GetResourceStream(new Uri(f, UriKind.Relative)); using (BinaryReader br = new BinaryReader(sr.Stream)) { byte[] data = br.ReadBytes((int)sr.Stream.Length); SaveToIsoStore(f, data); } } } private void SaveToIsoStore(string fileName, byte[] data) { string strBaseDir = string.Empty; string delimStr = "/"; char[] delimiter = delimStr.ToCharArray(); string[] dirsPath = fileName.Split(delimiter); //Get the IsoStore. IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication(); //Re-create the directory structure. for (int i = 0; i < dirsPath.Length - 1; i++) { strBaseDir = System.IO.Path.Combine(strBaseDir, dirsPath[i]); isoStore.CreateDirectory(strBaseDir); } //Remove the existing file. if (isoStore.FileExists(fileName)) { isoStore.DeleteFile(fileName); } //Write the file. using (BinaryWriter bw = new BinaryWriter(isoStore.CreateFile(fileName))) { bw.Write(data); bw.Close(); } } 

Answer 4

This is a very old thread, but I came up with a solution, since we just updated the WP7 application.

The secret is to first convert the image to base view 64, so start with this code:

  private string GetBase64(string f) { string ret = ""; { StreamResourceInfo sr = Application.GetResourceStream(new Uri(f, UriKind.Relative)); using (BinaryReader br = new BinaryReader(sr.Stream)) { byte[] data = br.ReadBytes((int)sr.Stream.Length); ret = System.Convert.ToBase64String(data); } } return ret; } 

Now, when you want to insert an image into the code (mine - gif), use this

 StringBuilder sb = ... // a string builder holding your webpage String b64 = GetBase64("assets/images/filename.gif"); sb.AppendFormat(@"<img src='data:image/gif;base64,{0}' /></div>", b64);