How to load image from shared file on local server?

user_12879474 0
Viewed 1009

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:

enter image description here

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

reactjs css image html javascript
2 Answers

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)
user_54244260

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:

  1. Lookup the local file path form the database
  2. Read the file
  3. Return the file to the browser
user_69501870
Related