Html Image src path with shared network not working in firefox

Question

In my webpage I use an image tag, the src attribute indicates the overall network location, i.e. (/server/images/image1.png). The exact script is equal "<img src="file://///server/images/image1.png". It works fine in IE. In firefox, when I do debugging with firebug, it displays an image, but it does not appear on the page (user view). Even it works great by copying this location and putting it in the firefox address bar. What will be the problem when using img tag and what is the solution for this? Thanks in advance.

Answer 1

I wrote a servlet that reads a file from the local network using Java File Stream and sets it in response, and this does the trick. Thanks to everyone for the valuable answer.

Answer 2

Believing this as an answer here to provide help to others, such as myself, who were looking for how to display web images, and came through this SO publication in the search results of the 3 best search engines. This also seems to be a better answer than the Java servlet issuing images in the response.

FireFox does not display network 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 MVC View like this:

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

here the "image" in @ Html.PhotoBase64ImgSrc (image) is a clean UNC network, for example.

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

Answer 3

HTML img :

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

:

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

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

. .

Answer 4

: - .

Answer 5

You may have to do it like this.

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

Once you add "../", it basically says that your browser returns one directory to search for a location after "../".

Where is the file and where is your HTML document?

UPDATE:

I also do all my work on a network server ... This should do the trick.

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

Thanks Aaron