6

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)

Improve this question
8
  • it should be //myserver/mappedPath/abc.jpg not \\\myserver\mappedPath\abc.jpg path is wrong Commented Aug 24, 2017 at 10:45
  • its not on a webserver. // make it load from a http source. it does need to be file:// . Updated question to make that a bit clearer Commented Aug 24, 2017 at 10:53
  • Really, can't you see the path is wrong from what I know you can't access local machines with \\\. Commented Aug 24, 2017 at 10:57
  • hmmm, obviously i've been trying many different variations of this before i posted here, but without listing them all i chose 2 which demonstrate in one go its source been set to \\ but behind the scenes using file:// Commented Aug 24, 2017 at 11:22
  • Setting the image src directly to file://machineName/mappedPath/abc.jpg does not help, nor file:///\\machineName\mappedPath\abc.jpg Commented Aug 24, 2017 at 11:24

4 Answers 4

Reset to default
5

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
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This does work and it will be handy I'm sure for someone, but because I can have up to 5000 images it isn't a solution I can use as it would involve changing the architecture too much to ensure only visible images are being base 64 encoded at any time
Perhaps you could load the images when the user scrolls to them?
I'm using a grid (datatables.net with deferred rendering enabled). It is able to take care of only loading visible images. I could conceivably see this working by changing over to a server side mode but there is quite a bit of side work involved. This is a viable solution but before undertaking I'd prefer to see if I can just somehow set the image src. I'm only concerned about IE, and while there are problems with this approach in chrome and FF, setting the image source like this in IE should be do-able
4

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

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

1 Comment

Worked for me. Also the site URL which hosts this HTML needs to be in the Intranet Security Zone in Windows Internet Settings (IE Settings). It works in IE11 and Edge Chromium. Still struggling to get it to work in Chrome, which errors: ``
2
+25

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">
Improve this answer

3 Comments

I did yes, and as you mentioned the localhost part is optional so file:///\\ and file://localhost/\\ are equivalent. I won't be put up all the combinations of slashes i've tried but i've tried a lot. I'm now thinking its a security issue and it's not possible or it requires some configuration on my part with how i've set up the network share
file:///\\ should work as well. Are you trying to access from outside your firewall? Also have you considered setting an http server as plan b? this would unify your images path syntax.
Pictures outside the root directory can't be accessed by file:// via UNC due to security restrictions!
2

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 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');
Improve this answer

5 Comments

So as you can read up on those other two questions there is actually a php solution for that. But it wont work with simply html. Either use a virtual directory or php in order to display images on your network. Cheers :)
Thanks for the suggestion, but I've to allow for there being 100s of mapped/shared locations which are not known ahead of time, so creating virtual directories for each is not possible. I'm sure in a lot of cases this would be a good solution
well you might can run some kind of .bat file to create those VRs. But in order to display those images with pure HTML you can't use file:// as src. Also for example if you want to link to one of those pictures, every link with file:// will not work in Chrome since this is made for security purposes! One way would be to look up the picture with php and display it this way. Then you avoid the restrictions which are given by the server/html
Hi flo. I don't need it to work in Chrome. I only need it to work IE. Its an intranet application for a handful of users. Browser choice is not important.. I've seen numerous posts online from people wanting this to work in chrome/ff having HAD success in IE by using file:// . But when I've used the same approach they've shown i can't get them to load. For excample, see accepted answer experts-exchange.com/questions/21830397/…. I thought maybe it only used to work with older versions of IE but i've used an emulator and had the same results.
In order to make a UNC path work I assume you would have to open up your server for your network and allow http to step outside your root. How to do this or if it even is possible I don't know. *.php solution is not working for you?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.