0
232
Viewsla imagen no se carga desde la carpeta estática expresa
Las imágenes se cargan desde la carpeta local, pero no desde la carpeta de carga, que se declara estática.
He estado tratando de cargar un archivo desde el navegador, la imagen se cargó correctamente y se guardó correctamente, pero mientras se procesan las imágenes de la carpeta de carga, no se procesan.
Datos de muestra de la base de datos MongoDb
_id:1 ... image:"/images/mouse.jpg" ... _id:2 ... image:"/uploads/image-1647229113730.jpeg" ...Componente del producto
const Product = ({ product }) => { return ( <Card className='my-3 p-3 rounded'> <Link to={`/product/${product._id}`}> <Card.Img src={product.image} variant='top' /> </Link> <Card.Body> ... </Card.Body> </Card> ) } export default ProductLa jerarquía de archivos es la siguiente
Repo | backend | server.js | frontend | public | images |mouse.jpg | uploads | image-1647229113730.jpegEn server.js en el backend, he hecho que la carpeta de carga sea estática
const __dirname = path.resolve(); app.use("/uploads", express.static(path.join(__dirname, "/uploads")));mi problema es sencillo,
/images/mouse.jpg es accesible | /uploads/image-1647229113730.jpeg no es accesible
aunque ambos están en la carpeta de proyectos, ¿por qué?
1 answers
Answer question0
En su server.js, está declarando __dirname que anula el __dirname declarado implícitamente que el nodo le proporciona.
Entonces, en lugar de usar el valor de path.resolve(), que es el directorio de trabajo actual como se describe aquí , no debe declarar __dirname usted mismo y usar el __dirname que proporciona el nodo. Esa es la ruta donde se encuentra su archivo fuente.
Luego puede usar path.join(__dirname,'../uploads') para obtener la ruta de su carpeta de cargas. (Los dos puntos son importantes)
EDITAR:
Lo siento. He olvidado por completo que __dirname no está disponible en los módulos ES...
Pero aquí hay otra manera que podría funcionar:
import { URL } from 'url'; const __dirname = new URL('.', import.meta.url).pathname; app.use("/uploads", express.static(path.join(__dirname, "../uploads")));