Html Image src path with shared network is not working in firefox

Question

In My webpage i am using a image tag, the src attribute is pointing to shared network location ie (/server/images/image1.png). The exact script is "<img src="file://///server/images/image1.png". It is working fine in IE. In firefox, when I do debug using firebug its showing image, but it's not displayed in page (user view). Even it's working fine when copy this location and place it in firefox address bar. What will be the problem while using img tag also what is the solution for this? Thanks in advance.

Answer 1

Putting this as an answer here so as to provide help for others like myself that was searching for how to display networked images and came accross this SO post in the top 3 search engine results. It also seems like a better answer than the java servlet issuing images in the response.

FireFox would not display networked images so I created an MVC helper that extends HtmlHelper.

public static class ImageHelper
{
    /// <summary>Converts a photo to a base64 string.</summary>
    /// <param name="html">The extended HtmlHelper.</param>
    /// <param name="fileNameandPath">File path and name.</param>
    /// <returns>Returns a base64 string.</returns>
    public static MvcHtmlString PhotoBase64ImgSrc(this HtmlHelper html, string fileNameandPath)
    {
        var byteArray = File.ReadAllBytes(fileNameandPath);
        var base64 = Convert.ToBase64String(byteArray);

        return MvcHtmlString.Create(String.Format("data:image/gif;base64,{0}", base64));
    }
}

use in the MVC View like so:

using 
<img src="@Html.PhotoBase64ImgSrc(image)" height="60px" width="60px" alt="photo" />

here the 'image' in @Html.PhotoBase64ImgSrc(image) is a pure network UNC, e.g.

//Photos/ebaebbed-92df-4867-afe8-0474ef8644eb.jpg

Answer 2

Create a regular HTML img element like so:

<img id="image1" runat="server" ImageUrl=<%# Eval("Value") %>/>

And in code behind do this:

image1.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);

Where bytes is a byte[].

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.QueryString["FileName"] != null)
    {
        // Read the file and convert it to Byte Array
        string filePath = "C:\\Users\\Public\\Pictures\\Sample Pictures\\";
        string filename = Request.QueryString["FileName"];
        string contenttype = "image/" + Path.GetExtension(filename).Replace(".", "");
        FileStream fs = new FileStream(filePath + filename, FileMode.Open, FileAccess.Read);
        BinaryReader br = new BinaryReader(fs);
        Byte[] bytes = br.ReadBytes((Int32)fs.Length);
        br.Close();
        fs.Close();
        image1.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);
    }
}

You are done. The image will be displayed.

Answer 3

The solution usually is: use a web server.

Answer 4

You may have to make it like so.

<img src="../server/images/image1.png" />

Once you add the "../" it is basically telling your browser to go back one directory to search for the location after the "../" .

Where is the file located and where is the location of your HTML document?

UPDATE:

I do all of my work on a Network Server as well... This should do the trick.

<img alt="" src="file:///SERVER:/FOLDER/IMAGES/image1.png" />

Thanks, Aaron

Answer 5

I wrote a servlet which reads the file from LAN using Java File Stream and sets it in response and it does the trick. Thanks to all for valuable response.