Estoy creando una aplicación de administración donde quiero mostrar imágenes cargadas de productos almacenados en la base de datos. He subido imágenes como una identificación de objeto en MongoDB. Pero el contenedor de imágenes en la aplicación de administración muestra la cantidad de imágenes almacenadas en la base de datos. Pero las imágenes no se muestran. Intenté usar la URL absoluta también, pero tampoco funciona.

Aquí está mi código para subir imágenes:

 {productPictures.length > 0 ? productPictures.map((pic, index) => ( <div key={index}>{pic.name}</div> )) : null} <input type="file" name="productPictures" onChange={handleProductPictures} />

Aquí está el código para mostrar las imágenes:

 <label className="key">Product Pictures</label> <div style={{ display: "flex" }}> {productDetails.productPictures.map((picture) => ( <div className="productImgContainer"> <img src={generatePublicUrl(picture.img)} alt="" /> </div> ))} </div>

La función Generar URL se ve así:

 const api ='http://localhost:2000/' // const api = 'http://192.168.0.104:2000/' const generatePublicUrl = (fileName) => { return `http://localhost:2000/src/uploads/products/${fileName}`; } export { api, generatePublicUrl };

Función para guardar el producto en la base de datos:

 const createProduct= (req, res) => { const { name, price, description, category, quantity, createdBy } = req.body; let productPictures = []; if (req.files.length > 0) { productPictures = req.files.map((file) => { return { img: file.location }; }); } const product = new Product({ name: name, slug: slugify(name), price, quantity, description, productPictures, category, createdBy: req.user._id, }); product.save((error, product) => { if (error) return res.status(400).json({ error }); if (product) { res.status(201).json({ product, files: req.files }); } }); }

Las imágenes cargadas en el programa se ven así: Abrir imagen aquí

Pero la página muestra un área en blanco y el nombre del archivo se muestra indefinido cuando se inspecciona. Abrir imagen aquí