1

I am building a system which will contain database of images. There are about 1 million of images, 1Tb total size. All images are located in some directory C:/path/to/image/store on local disk.

We do have a rest api and database which contains important info about all those images. user can query the rest api, submit some criteria about those images and they receive a response in form of json object:

{pathToImage="C:/path/to/image/store/data/somedir/abcd.jpg"}

Now we have a React client which needs to display the image.If we put simply:

<img src="C:/path/to/image/store/data/somedir/abcd.jpg">

it will not work. Browser does not allow to display local files. We can bypass it by placing the entire image storage under react public directory and then to refer to files by:

<img src={process.env.PUBLIC_URL + '/image.jpg'}>

but we simply cannot move the directory with images around. It is to big and it is used by other applications as well.

Please do not lecture me that web browsers do not allow displaying images from local filesystem due to security considerations. I am perfectly aware of this - and I do not care. In my use case security is a non-issue. We are not concerned by it. I will not explain why, just take it as a fact: The security considerations why chrome does not allow to display images from local file system do not apply here. Period. We want to display the images.

So here is my question: Is there ANY way to configure React or chrome to tell it: "This directory is public, you can safely serve any images from it to the client"?

SomoKRoceS
  • 2,449
  • 2
  • 14
  • 22
Ivan Novograd
  • 21
  • 1
  • Why not serve the images through the API and run server and client together locally? – Shimon Cohen Aug 16 '20 at 20:44
  • In your situation I configure a web server to publish the images, I assume that you use windows for the path of your images could be a xamp or wamp. By the way, how're you public your react app? – Yoandry Collazo Aug 16 '20 at 20:53
  • 1
    The browser doesn't care whether you care about the security implications or not either, so you appear to be at an impasse =). More seriously though, you do not need to move the files to the public folder, you can add an api endpoint to your server that returns those files upon request. You could also run a separate webserver - See this answer for a few options, https://stackoverflow.com/a/31547188/10011833. You could also run `serve` (https://www.npmjs.com/package/serve) to serve up those files. – rfestag Aug 16 '20 at 22:16
  • I have a similar situation/use-case with my project. Can anyone help with this. – Alok Ranjan Dec 05 '20 at 16:51

0 Answers0