0
613
Vistas¿Cómo cargar una imagen desde un archivo compartido en el servidor local?
Recibo datos del backend del servidor local y quiero cargar la imagen. Estoy recibiendo una matriz de objetos como este:
[ { "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" },]Después de consola.log(rowData.path) la ruta se ve así:
\\192.168.1.245\Imágenes\ACL-3382014766-1.jpg
Entonces es perfecto para pegar en el navegador y obtengo la imagen:
El problema es que no puedo cargarlo en mi etiqueta img . Lo intenté:
<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" />y nada funciona. ¿Cómo puedo cargar las imágenes?
ACTUALIZAR:
Si instalo el servidor http en el servidor \\192.168.1.245 y alojo la carpeta Imágenes allí en un puerto específico, puedo recibir la imagen. Pero esto significa que siempre tendré que mantener la carpeta alojada.
ACTUALIZACIÓN 2:
Si intento cargar la imagen así:
<img src={`file://192.168.1.245/Images/${rowData.t_mitm}`} alt={`${rowData.t_mitm}`} loading="lazy" />Probablemente funcione, pero obtengo:
No se permite cargar recursos locales: file://192.168.1.245/Images/ACL-3382012763-1.jpg
2 Respuestas
Responde la pregunta0
A pesar de que los navegadores admiten file:// para abrir archivos locales, el soporte finaliza aquí. Se considera una violación de seguridad abrir un archivo local dentro de una página web. Es por eso que su sistema no está funcionando.
Soluciones:
- La solución canónica sería tener un sistema que sirva su carpeta local como
http:// - Si no le gusta la idea de publicar la carpeta y tiene control sobre el navegador que usa su "sitio web", puede intentar iniciar un navegador con las funciones de seguridad deshabilitadas (para
Chrome, puede intentar--allow-file-access-from-filesy--disable-web-securityflags)
0
La forma en que resolvería esto sería tener una URL a la que pueda llamar en su backend que sirva la imagen.
Parece que ya está almacenando la ruta del archivo local en su base de datos, por lo que su código simplemente cargaría la imagen de esa ruta y la devolvería. No estoy seguro de cómo funciona su API / backend, pero no debería ser tan difícil agregar un punto final de API que devuelva el archivo.
A continuación, puede utilizar este código para su imagen:
<img src={process.env.PUBLIC_URL + '/getImg/' + id} alt={`${rowData.t_mitm}`} loading="lazy" />En este código, "id" es el ID de cualquier elemento que esté intentando cargar desde la base de datos. Cuando se le llame, el backend haría lo siguiente:
- Busque la ruta del archivo local desde la base de datos
- Leer el archivo
- Devolver el archivo al navegador