How to load image from shared file on local server?

Question

I am receiving data from local server backend and I want to be to load image. I am receiving array of object like this:

[ {
        "t_pdno": "SFC093989",
        "t_mitm": "SLS005251ACL-3382012763-1",
        "t_qrdr": 60,
        "Operations": "10,20,30,40,60,70",
        "path": "\\\\192.168.1.245\\Images\\ACL-3382012763-1.jpg"
    },
    {
        "t_pdno": "SFC093991",
        "t_mitm": "SLS005251ACL-3382012765-1",
        "t_qrdr": 120,
        "Operations": "10,20,30,40",
        "path": "\\\\192.168.1.245\\Images\\ACL-3382012765-1.jpg"
    },]

After I console.log(rowData.path) the path it looks like this:

\\192.168.1.245\Images\ACL-3382014766-1.jpg

So it is perfect to paste in browser and I get the image:

The problem is I cannot load it in my img tag. I tried:

<img
    src={process.env.PUBLIC_URL + rowData.path}
    alt={`${rowData.t_mitm}`}
     loading="lazy"
              />

<img
     src={rowData.path}
     alt={`${rowData.t_mitm}`}
     loading="lazy"
              />




  <img
      src={require(rowData.path)}
      alt={`${rowData.t_mitm}`}
      loading="lazy"
                  />



 <img
      src={`url(rowData.path)`}
      alt={`${rowData.t_mitm}`}
      loading="lazy"
                  />

and nothing is working. How can I load the images?

UPDATE:

If I install http-server to the \\192.168.1.245 server and host the Images folder there on specific port I am able to receive the image. But this mean that I will always have to keep folder hosted.

UPDATE 2:

If I try loading the image like this:

   <img
          src={`file://192.168.1.245/Images/${rowData.t_mitm}`}
          alt={`${rowData.t_mitm}`}
          loading="lazy"
                      />

It probably works but I get:

Not allowed to load local resource: file://192.168.1.245/Images/ACL-3382012763-1.jpg

Can you give us any more details on your local backend server? — dave, Sep 20 '21 at 06:58
@dave I make request to database which is returning me result like "ACL-3382012763-1". Then I am sending this as t_mitm field. Nothing more — Borislav Stefanov, Sep 20 '21 at 07:53
Also returning path like \\192.168.1.245\Images\ACL-3382014766-1.jpg or whatever I try — Borislav Stefanov, Sep 20 '21 at 08:00
I think your server will need to be configured to serve images over http. That's why it works when you spin up `http-server`. How are your images hosted? Are you running apache? ngix? IIS? — dave, Sep 20 '21 at 08:08
How does the `src` value look like in your browser page source? — Lajos Arpad, Sep 20 '21 at 08:35
@dave My images are just shared in the network in folder. Nothing more. When I host with http-server they are accessible on specific port. — Borislav Stefanov, Sep 20 '21 at 10:30
@LajosArpad depends on how I send it. I tried all of the examples above. — Borislav Stefanov, Sep 20 '21 at 10:31
Likely going to need to serve your images over a CDN of some kind — HollyOS, Sep 21 '21 at 01:36

Newbie · Answer 1 · 2021-09-28T09:33:47.490

4

Despite browsers supporting file:// to open local files the support ends here. It is considered a security violation to open a local file within a webpage. This is why your system is not working.

Solutions:

The canonical solution would be to have a system serve your local folder as http://
If you do not like the idea of serving the folder and if you have control over the browser using your "website" you may attempt to start a browser with security features disabled (for Chrome you may try --allow-file-access-from-files and --disable-web-security flags)

edited Sep 28 '21 at 09:33

answered Sep 20 '21 at 13:52

Newbie

4,462
11
23

I am aware of both of solutions. Currently I am serving with http-server the Images folder but I am looking if there is another possibility how to perform it. I am even thinking of my back-end to get image somehow and send base64 string to front-end – Borislav Stefanov Sep 21 '21 at 06:45
"my back-end to get image somehow and send base64 string to front-end" would be equivalent to have your back-end serve the image (but less efficient due to encoding expansion). – Newbie Sep 21 '21 at 08:58
If you describe better (in your question) your setup and how/why you need this solution we can help you better – Newbie Sep 21 '21 at 09:00
You can have the back end translate to base64. You just have to write the IMG tag accordingly. Here's an SO with the basic idea.... https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html – Atmas Sep 27 '21 at 03:36
But let newbies point it might not be your best answer... Just wanted to address your base64 point. – Atmas Sep 27 '21 at 03:36

score 0 · Answer 2 · answered Sep 27 '21 at 00:03

The way that I would solve this would be to have a URL that you can call in your backend that would serve up the image.

It appears that you are already storing the local file path in your database so your code would just load the image from that path and return it. I am not sure how your API / backend works but it should not be that hard to add an API endpoint that would return the file.

You can then use this code for your image:

<img
    src={process.env.PUBLIC_URL + '/getImg/' + id}
    alt={`${rowData.t_mitm}`}
     loading="lazy"
              />

In this code, "id" is the ID of whatever item you are trying to load from the database. When called, the backend would then:

Lookup the local file path form the database
Read the file
Return the file to the browser

How to load image from shared file on local server?

2 Answers2

Solutions: