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

Answer 1

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)