1

I have a server running serving a HTML page and would like to serve an image residing in a local drive in Linux. I read that I can get that to work with appending file://... However, it doesn't seem to work in my case and I am suspecting that it might not work in my machine (Ubuntu 18.04). There's no error arose, just the img doesn't seem to find the image. 

<img src="file:///home/my_user/my_picture.png">

Image result from code snippet above: img result from code snippet above

In this thread, I found an answer saying that the modern browser doesn't allow to serve local file for security reason.

If this is the case, is there any alternative for this?

I am thinking of passing the image byte data to the client and let the client-side javascript construct the image. But, my concern is the performance issue when there are a lot of image to be transferred. Also, I think it's quite ugly since the client is guaranteed to be in the same machine as the server.

Darren Christopher
  • 3,893
  • 4
  • 20
  • 37
  • If they can assign to that image, they can also assign to some file like `password.txt` or `employee.xlsx`.... Why do you still want to use it? – Tân Dec 17 '19 at 06:07

2 Answers2

2

The file:/// is for local files - that is the files in the computer where the browser runs.

If you want to load the files which are not in your public folder of the server,

  1. You can mount the image folder inside the public folder

  2. Create a route in your server which would resolve the image requests to the image folder

Charlie
  • 22,886
  • 11
  • 59
  • 90
  • The file is in the same computer as the browser I use. Any idea why this doesn't work? Is the security prevent the browser to show using `file:///`? – Darren Christopher Dec 17 '19 at 06:07
  • 2
    @DarrenChristopher Yes. It prevents websites reading your private data. If it would be allowed, any website could steal all of your files' content, without your consent, and analyse, upload to somewhere, or even sell them. – FZs Dec 17 '19 at 06:10
  • @DarrenChristopher of course the file is in the same computer as the browser, but the browser can browse websites, which can run any javascript code. If it's allowed to read your machine's files, who knows what the sites will do with your machine's files, while it's just an arbitrary script written by strangers putting on some website. – Loi Nguyen Huynh Dec 17 '19 at 06:24
0

If you're loading imgs with the file:/// protocol, those files are on the client-side machine, not your server machine. And you wouldn't know the path of an image on the client-side machine, because every client's machine is different. Then if the image that is yours, not the client's, you obviously have to somehow transfer it to them, even if there're abandon, or just 1 image. Of course, you could optimize the transferring process with variant methods, like transferring base-64 byte data, shrink the size of the images, use different servers to transferring images than the code server, etc. But one way or another, you have to somehow transfer it to them.

the client is guaranteed to be in the same machine as the server

How could a client be guaranteed to be in the same machine as the server? Is it an app you deliberately downloaded? If it's a browser, it can be any arbitrary site on the internet. So your sentence is not in the context of the browser.

If you want to read the client's images, you have to let them select which image they allowed you to read, via File Reader, try the snippet below. 

function showpreview(e) {
  var reader = new FileReader();
  reader.onload = function (e) {
    document.querySelector('img').src = e.target.result;
  }
  //Imagepath.files[0] is blob type
  reader.readAsDataURL(e.files[0]);
}
<img style="width: 100vw" src="" alt="">
<input type="file" onchange='showpreview(this)'>
Loi Nguyen Huynh
  • 8,492
  • 2
  • 29
  • 52