Search code examples
node.jsreactjsexpressmulterreact-dropzone

How to display a profile picture in a MERN stack app without it looking weird?


I am building a mern-stack application and want the user to have a profile pic , so I created an API using multer and node.js for uploading the image in the backend and react dropZone in the frontend . and i am displaying the picture in the profile vue but its looking a little weird to fit the space so I tried some resizing tools like react-image-file-resize but its not doing anything. I'll attach a picture to demonstrate .enter image description here is there another way to fix the image .

enter image description here


Solution

  • There are lots of different ways of handling image resizing. Have you thought about handling it with just css? something like object-fit: cover; might help you out. Or just have a width and no height. Image resizing/cropping/preview-generation/resolution/etc. Can be a real pain.