Loading local image from Isolated Storage to html page

Question

There's something strange and wired with the "image path" when using it in html page from IsolatedStorage.

I want to create an html-page, that will be used by app's webBrowser object. So I create an html page in IsolatedStorage and then use this page with webBroswser.Navigate.

Everything works fine except the images.

1) If I create an html page and images at the root of IsolatedStorage, everything works fine, the code <img src="image.png"> works and I can see the image at page page.

2) However, the way of saving pages and images at root is not a good idea in my opinion as I already have a number of directories, used by app there, so, I create a new directory "Html" and save all pages there.

Now, when I open this page I can't see my image. I've tried several variations of src links and still can't find an answer.

What'll be the correct link in <img src=..."> tag, if the hierarchy is:

IsolatedStorage-->Html(folder)-->index.html(file)

(1) IsolatedStorage-->Html(folder)-->image.png(file)

(2) IsolatedStorage-->Html(folder)-->Images(folder)-->image.png(file)

Actually, I thought it would be something like <img src="image.png"> for (1), but I tried several similar versions and none of them worked.

possible duplicate of [Use local images in Webbrowser control](http://stackoverflow.com/questions/10363174/use-local-images-in-webbrowser-control) — Robert MacLean, Jan 10 '14 at 17:00

score 0 · Accepted Answer · answered Jul 08 '13 at 06:11

Well, that seems a bit strange:

This method will save the picture to the IsolatedStorage, but won't allow to use it in html img tag:

            using (IsolatedStorageFile isopicsFile = IsolatedStorageFile.GetUserStoreForApplication())
            {
                if (isopicsFile.FileExists(Constants.HtmlFolderName + "launch.png") == false)
                {
                    Stream yourFilepath = Application.GetResourceStream(new Uri("/someUri/launch.png", UriKind.Relative)).Stream;

                    BitmapImage b = new BitmapImage();
                    b.SetSource(yourFilepath);

                    WriteableBitmap wb = new WriteableBitmap(b);
                    using (var isoFileStream = isopicsFile.CreateFile(Constants.HtmlFolderName + "launch.png"))
                    {
                        var width = wb.PixelWidth;
                        var height = wb.PixelHeight;
                        // Theoretically, there may be the problem, as the file extention is png, not jpg
                        System.Windows.Media.Imaging.Extensions.SaveJpeg(wb, isoFileStream, width, height, 0, 100);
                    }
                }
            }

And this one will save the picture and will allow to use it with html tags:

            string f = "somePath/launch.png";
            StreamResourceInfo sr = Application.GetResourceStream(new Uri(f, UriKind.Relative));
            using (BinaryReader br = new BinaryReader(sr.Stream))
            {
                byte[] data = br.ReadBytes((int)sr.Stream.Length);
                string fileName = "launch.png";
                string filePath = Constants.HtmlFolderName + fileName;

                using (IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication())
                {
                    if (isoStore.FileExists(filePath))
                    {
                        isoStore.DeleteFile(filePath);
                    }

                    using (BinaryWriter bw = new BinaryWriter(isoStore.CreateFile(filePath)))
                    {
                        bw.Write(data);
                        bw.Close();
                    }
                }
            }

Also, in second case, the picture properties must be set to Content + Always Copy.

Loading local image from Isolated Storage to html page

1 Answers1