0
224
Viewsimage is not getting loaded from the express static Folder
Images is getting loaded from the local Folder But not from the uploads Folder which is declared static.
I have been trying to upload file from the browser, The image is uploaded sucessfully and saved successfully But while rendering the images from the uploads folder is not getting rendered
Sample Data from MongoDb Database
_id:1
...
image:"/images/mouse.jpg"
...
_id:2
...
image:"/uploads/image-1647229113730.jpeg"
...
Product Component
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 Product
The File herarchy is as follows
Repo
| backend
| server.js
| frontend
| public
| images
|mouse.jpg
| uploads
| image-1647229113730.jpeg
In server.js in the backend i have made the uploades folder static
const __dirname = path.resolve();
app.use("/uploads", express.static(path.join(__dirname, "/uploads")));
My problem is simple ,
/images/mouse.jpg is accessible | /uploads/image-1647229113730.jpeg is not accessible
though both are there in the projects folder why ?
1 answers
Answer question0
In your server.js you are declaring __dirname which overrides the implicitly declared __dirname that node provides for you.
So instead of using the value of path.resolve() which is the current working directory as described here you shouldn't declare __dirname yourself and use the __dirname that node provides. That is the path where your source file is located.
Then you can use path.join(__dirname,'../uploads') to get the path of your uploads folder. (The two dots are important)
EDIT:
I'm sorry. I've completely forgotten that __dirname isn't available in ES modules...
But here is another way that could work:
import { URL } from 'url';
const __dirname = new URL('.', import.meta.url).pathname;
app.use("/uploads", express.static(path.join(__dirname, "../uploads")));