0
606
ViewsHow to load image from shared file on local server?
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
2 answers
Answer question0
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
Chromeyou may try--allow-file-access-from-filesand--disable-web-securityflags)
0
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