Как отобразить фотографию профиля в приложении стека MERN, не выглядя странно?

Question

Я создаю приложение mern-stack и хочу, чтобы у пользователя была картинка профиля, поэтому я создал API, используя multer и node.js для загрузки изображения в бэкэнд и реагирования на dropZone во внешнем интерфейсе. и я показываю картинку в профиле vue, но она выглядит немного странно, чтобы уместиться в пространство, поэтому я попробовал некоторые инструменты изменения размера, такие как response-image-file-resize, но ничего не сделал. Я приложу картинку для демонстрации. введите описание изображения здесь есть еще один способ исправить изображение.

введите описание изображения здесь

Answer 1

Существует множество различных способов изменения размера изображения. Вы думали о том, чтобы справиться с этим только css? что-то вроде object-fit: cover; может вам помочь. Или просто есть ширина и нет высоты. Изменение размера изображения / обрезка / предварительный просмотр / разрешение / и т. Д. Может быть настоящей болью.

Answer 2

Я не думаю, что есть проблема с вашим кодом реакции. Пока пользователь загружает свой профиль, добавьте ограничение на разрешение фотографии. Вы можете либо самостоятельно обработать изображение до подходящего разрешения, либо позволить пользователю загрузить необходимое разрешение в первую очередь.

Чтобы обрезать изображение до желаемого разрешения, существуют плагины javascript с открытым исходным кодом. Я сталкивался с этим, когда гуглял.

Croppie - простой обрезчик изображений javascript

Затем, когда вы отображаете изображение, добавьте ограничение CSS для тега img вбыть определенного размера, например, 100 на 100 пикселей.

Или иметь право ограничения на сам тег img.

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