Tengo un servidor expreso local que sirve un archivo json. También tengo muchos archivos de imagen dentro de una carpeta local. Las rutas de la imagen son partes del objeto json que quiero mostrar en mi DOM. Sin embargo, obtengo una representación de cadena de estas rutas de imagen como parte de la respuesta que no puedo usar. ¿Cuál es la mejor manera de enviar imágenes locales al servidor desde un servidor local?
Mi configuración del lado del servidor:
app.use(express.static(path.join(__dirname, 'public'))) app.use(express.static(path.join(__dirname, 'server/img')))
Mi archivo JSON
{ "Images": [{ "title": "First Block", "images": ["server/img/bijay.jpg", "server/img/dance.png", "server/img/ocean.jpg"] }, {obj2}, {obj3}, {obj4}] }
Mi código del lado del cliente para imprimir la imagen
<ul> <li ng-repeat="obj in objArray"><img ng-src="{{obj.images[0]}}"></li> </ul> // just testing first image
Mi estructura de carpetas:
Las imágenes están dentro de la carpeta img. no se muestra aquí para ahorrar espacio
Finalmente, después de mucho repensar, encontré la solución.
Había definido la carpeta 'estática' en el servidor como 'servidor/img'. Sin embargo, dentro del objeto json, estaba asignando la ruta absoluta para los archivos de imagen nuevamente. Todo lo que necesitaba hacer era ' servidor/imagen/ imgFileName.jpg' para resolver el conflicto :))
Basado en los comentarios de @Tolsee:
Coloque las imágenes en una carpeta 'pública'. (/public/img/dance.png) Luego, en su aplicación Express, agregue la siguiente línea:
let app = express(); app.use(express.static(path.join(__dirname, 'public')));
Las imágenes estarán disponibles con la siguiente url:
localhost:port/img/dance.png
Podría simplemente servir /server/img y luego simplemente usar lo siguiente:
let app = express(); app.use(express.static('/server/img')); localhost:port/dance.png
Es posible que se necesite alguna configuración dependiendo de la estructura de su proyecto.