html Image source from UNC path

Question

I need to set an image source to a location on the network.

The image is located at machineName\mappedPath\abc.jpg.

It does not load in any browser though all I need it to work in is IE v9 and above. When I inspect the location in the source it is set to

<img src="\\machineName\mappedPath\abc.jpg">

When i right click on the image placeholder in IE and look at the properties I see the address is set to

file://machineName/mappedPath/abc.jpg

Using file explorer with either of those paths opens the image fine.

I've tried adding IP. Can't add a domain name as its not on a domain.

Other paths I've tried setting the source to directly below. I've read a few places that 5 front slashes are required but it hasn't made any difference

<img src="file://\\machineName\mappedPath\abc.jpg">
<img src="file:////\\machineName\mappedPath\abc.jpg">
<img src="file://///\\machineName\mappedPath\abc.jpg">
<img src="file:////machineName/mappedPath/abc.jpg">
<img src="file://///machineName/mappedPath/abc.jpg">
<img src="\\machineName\mappedPath\abc.jpg">

I've also tried enabling file sharing by adding a firewall rule

https://blogs.msdn.microsoft.com/windows_azure_connect_team_blog/2011/01/20/windows-azure-connect-use-case-enable-file-sharing-on-windows-azure-vm/

On a side note, does the path have to be mapped as a network drive or is it sufficient to set it up as a network share?

Not a definitive source but this is pretty common kind of information I've come across https://jonlabelle.com/snippets/view/html/create-html-link-to-unc-path , but for which won't work for me (in IE)

Answer 1

I've found this post. It might have some relevant information.

Here's the answer from Paul Zahra:

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

You should add 3 more / to the path with the file:// prefix:

<img src="file://///machineName/mappedPath/abc.jpg">