CODEWITHSUNDEEP
node.jsreactjsexpressmulterreact-dropzone
Mohamed Aljane
Mohamed Aljane

Reputation: 51

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

Upvotes: 0

Views: 1301

Answers (2)

thordoor
thordoor

Reputation: 106

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.

Upvotes: 1

Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

I don't think there is an issue with your react code. While a user upload their profile, add a restriction on the resolution of the photo. You could either process the image to a suitable resolution by your self or let the user upload the required resolution in the first place.

To crop the image to a desired resolution there are Open Source javascript plugins. I came across this while googling.

Croppie - a simple javascript image cropper

Then where you display the image, add a css restriction for the img tag to be a specific size, such as 100px by 100px.

Or else have the restriction right on the img tag itself.

<img src='profile.jpg' width="50" height="50" className='profile-pic'>

Upvotes: 0

Related Questions