Use Local Images in Webbrowser Control

Use local images in Webbrowser control

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.

How do I reference a local resource in generated HTML in WinForms WebBrowser control?

Here's what we do, although I should mention that we use a custom web browser to remove such things as the ability to right-click and see the good old IE context menu:

public class HtmlFormatter
{
    /// <summary>
    /// Indicator that this is a URI referencing the local
    /// file path.
    /// </summary>
    public static readonly string FILE_URL_PREFIX = 
        "file://";

    /// <summary>
    /// The path separator for HTML paths.
    /// </summary>
    public const string PATH_SEPARATOR = "/";
}

// We need to add the proper paths to each image source
// designation that match where they are being placed on disk.
String html = HtmlFormatter.ReplaceImagePath(
    myHtml, 
    HtmlFormatter.FILE_URL_PREFIX + ApplicationPath.FullAppPath + 
    HtmlFormatter.PATH_SEPARATOR);

Basically, you need to have an image path that has a file URI, e.g.

<img src="file://ApplicationPath/images/myImage.gif">

Embed resource image inside HTML on WebBrowser control

Thanks to @Jimi's comments, I wanted to condense the discussion to an answer that worked.

Add the following function somewhere in your code:

Private Function BmpToBytes_MemStream(ByVal bmp As Bitmap) As Byte()
    Return New ImageConverter().ConvertTo(bmp, GetType(Byte()))
End Function

Next, convert the resource image (which is a png image named myimage.png) to Base64:

 Dim myimage64 As String = Convert.ToBase64String(BmpToBytes_MemStream(My.Resources.myimage))

Finally, embed the converted image in HTML code using e.g.:

Dim str1 as String = ""

str1 += "<table class=" & """" & "mycssclass" & """" & " Align=center>"
str1 += "<caption><b>My Caption</b></caption>"
str1 += "<tr><td>$"<img src = ""data:image/png;base64,{myimage64}"">"</td></tr>"
str1 += ("</table>")
WebBrowser1.Refresh()
WebBrowser1.DocumentText = str1

Display local image in a WebBrowser control in a WP7 application

If you save the HTML to isolated storage and then use Navigate(new Uri("folder/index.htm", UriKind.Relative)) you can reference your images/css using relative paths.

Show an HTML file of my Project in WebBrowser control at run-time

A file which exists in your project, lives in a specific location in your machine. But after you distribute the program and run it on user's machine, the file will not exists in the target machine.

You may want to distribute the file or add it as resource. To solve the problem you can use either of the following solutions:

You can copy the file to output directory at build time
You can add the file to a resource file like Resources.resx
You can make the file as an embedded resource

Then to show the file, you can use the following methods:

Get the file path and call the Navigate method or assign it to Url property
Get the resource content and assign it to DocumentText property
Get the resource stream and assign it to DocumentStream property

Copy the file to Output Directory

To copy the file to output directory at build time:

Solution explorer → See properties of your file
Set Build Action to Content.
Set Copy to Output Directory to Copy always.

Then the file will be copied to your output directory and you can use it this way:

var path = System.IO.Path.Combine(Application.StartupPath, "test.html");
this.webBrowser1.Navigate(path);

Please note, if the file is located under a folder in your project, for example under MyFolder, then it will be copied into a folder with the same name in the output directory of the application:

var path = System.IO.Path.Combine(Application.StartupPath, "MyFolder", "test.html");
this.webBrowser1.Navigate(path);

Add the file to a resx resource file like Resources.Resx

You can add the file to resource file of the project. This way it will be distributed in a resource assembly and you don't need to copy the file to output directory. To do so:

Solution explorer → Your project → Properties folder → open Resources.Resx file
From toolbar of the designer → Add existing file → Add the html file.

Then the content of the file will be available through a string property of the Resources. The property name will be same as the file name, for example if the file name is test.html, the property name will be test and You can use it this way:

this.webBrowser1.DocumentText = Properties.Resources.test;

Please note, for this solution the file doesn't need to be distributed by your project and it will be part of the resource file. However it will be part of your project file.

Make the file as an embedded resource

You can make the file as an embedded resource. This way it will be distributed in a resource assembly and you don't need to copy the file to output directory. To do so:

Solution explorer → See properties of your file
Set Build Action to Embedded Resource.
Set Copy to Output Directory to Do not copy.

Then to use, you need to get the file content from embedded resources. Assuming the file name is "test.html":

var fileName = "test.html";
var name = Assembly.GetExecutingAssembly().GetManifestResourceNames()
    .Where(x => x.EndsWith(fileName)).First();
webBrowser1.DocumentStream = 
    Assembly.GetExecutingAssembly().GetManifestResourceStream(name);

Please note, if you have the file inside a folder like MyFolder in the project, then the filename in above example will be "MyFolder.test.html".

Use Local Images in Webbrowser Control