Entonces tengo este escenario donde estoy cargando las imágenes. En el front-end, su React Js y el back-end en Node Js . Las imágenes se cargan bien, pero cuando tengo que mostrarlas en el front-end, no funciona.
Estoy usando react-image-gallery para mostrar imágenes como esta:
<ImageGallery items={this.state.currentImages} lazyLoad={true} ref={this.myRef} showIndex={true} /> Esto es lo que hay en this.state.currentImages :
[ { "original": "/var/www/html/ciaoOrderTaking/projects/ciao_full_stack/uploads/images/items/IMAGE-1645782694696.jpg", "thumbnail": "/var/www/html/ciaoOrderTaking/projects/ciao_full_stack/uploads/images/items/IMAGE-1645782694696.jpg" } ]En el navegador, la ruta se convierte en:
http://localhost:3000/var/www/html/ciaoOrderTaking/projects/ciao_full_stack/uploads/images/items/IMAGE-1645782694696.jpg
¿Cómo puedo hacer que funcione? ¿Alguna solución?
Debe crear una URL y servir sus archivos cargados estáticamente en el backend, por ejemplo, su puerto backend es 3000 y ha servido estáticamente la carpeta de carga en el backend de nodejs. Cargar estructura de carpetas: Cargas -> Imágenes -> elementos -> IMAGE-1645782694696.jpg Ahora la URL de su archivo será: http://localhost:3000/images/items/IMAGE-1645782694696.jpg
Así que cree una función en la interfaz que convertirá la URL de su imagen en una URL de archivo accesible como:
const toAbsoluteURL=(url)=>{ return `http://localhost:3000/${url}` // note that this is backend url }Y asigne la función a una matriz de imágenes.
images=images.map((url)=>toAbsoluteURL(url?.original)); // now images array have accessible file urlsPuede hacer URL accesibles con la función anterior como desee.
Resulta que esta fue la respuesta.