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 :(

score 8 · Accepted Answer · edited Jan 10 '14 at 16:56

8

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.

edited Jan 10 '14 at 16:56

Robert MacLean

38,975
25
98
152

answered Apr 28 '12 at 12:17

Paul Diston

3,279
1
17
20

Thank you very much Paul! But I do a NavigateToString method on the Webbrowser, and have the whole html page in the string. For some reason the images don't work if I do it that way. :S – MrCornholio Apr 28 '12 at 14:54
btw. Only the images in the Isolated Story don't work with NavigateToString. The iamges that have a absolute Uri do work. – MrCornholio Apr 28 '12 at 15:05
You need to save your string into a file in the Isolated Storage too and set the Base property on the WebBrowser control to the local directory in which you saved your files (html , images, css, javascript) – MatthieuGD Apr 28 '12 at 21:33
Hi @Paul there is any way to load local images using `NavigateToString` because i have multiple images need to load images dynamically based on user selection – kartheek Jan 17 '13 at 13:42

score 5 · Answer 2 · edited Jan 10 '14 at 16:55

5

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.

edited Jan 10 '14 at 16:55

Robert MacLean

38,975
25
98
152

answered Nov 23 '13 at 18:45

Seva Alekseyev

59,826
25
160
281

Great answer. Works perfectly with `NavigateToString`. Thank you very much :-) – tobi.at Dec 14 '13 at 22:02
@SevaAlekseyev IMPORTANT: The above technique will not work with other directories in storage that are sibling to the Local folder, only those in that the Local folder and below. For example, I created a sibling directory to Local called Temp using the Path.GetTempPath() method. Files in that directory were *not* accessible by a WebBrowser component. Copying them to the Local folder solved the problem. – Robert Oschler Mar 22 '14 at 18:15

charulatha krishnamoorthy · Answer 3 · 2013-02-04T13:22:54.120

well you can used dynamic images by concatenate the above given Paul example application update the array dynamically,

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

and before to write to isolated you can delete the existing one

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

score 0 · Answer 4 · answered Dec 14 '15 at 21:11

This is a very old thread, but I've come up with a solution, as we've just today updated a WP7 app.

The secret is to convert the image to a base 64 representation first, 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, where you want to inject an image into the code (mine are gifs) 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);

Use local images in Webbrowser control

4 Answers4

Linked