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">

Answer 3

The first two are part of the protocol indicator ("file://"), then host name (should be the host name which the file should be accessed from. i.e. localhost, which is the default, so can be left blank!), then another slash, then the UNC path starts, which explains the last two slashes, as all UNC paths start with two slashes.

Tried the below?

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

Answer 4

I have some pictures on my NAS. In order to be able and display them I had to do some serious research as it is a pain. Hardly any information out there somehow. Here is what I did:

• I've an IIS running
• at first I had to create a virtual directory How to: Create and Configure Virtual Directories in IIS 7.0
• then I've this code: <img src="/virtualdir/picture.jpg" \>

I also tried every possible //\, ////, combination of those and IP and what else... no way to get it work.

But what actually is working was/is an upload to \\IE-NAS-01\Data\Pictures for example. This way I can use it since the PHP is allowed to do so once you set up the rights for those kind of actions.

It is that HTML is not granted to step outside your wwwroot directory and so you can't access any files on your server or network. But once you've set up your virtual directory it is "part" of the wwwroot.

I hope this will help

Cheers

Edit: You will find some more here: - Stack Overflow #13421784 - https://stackoverflow.com/a/258380/8188398

Display a picture outside root with php:

<img src="http://path.to/this/file.php"/>

file.php:

<?php
header('Content-Type: image/jpeg');
readfile('path/to/image.jpeg');

This way you can avoid the restriction! Cheers!

PS: Content-Types:

header('Content-Type: image/gif');
header('Content-Type: image/jpeg');
header('Content-Type: image/png');