如何在 MERN 堆栈应用程序中显示个人资料图片而不看起来很奇怪？
How to display a profile picture in a MERN stack app without it looking weird?
我正在构建一个 mern-stack 应用程序并希望用户拥有个人资料图片，所以我创建了一个 API 使用 multer 和 node.js 用于在后端上传图像并响应 dropZone在前端。我在配置文件 vue 中显示图片，但它看起来有点奇怪以适应 space 所以我尝试了一些调整大小的工具，如 react-image-file-resize 但它没有做任何事情。我会附上一张图片来演示。enter image description here
有没有其他方法来修复图像。
enter image description here
处理图像大小调整的方法有很多种。您是否考虑过仅使用 css 来处理它？ object-fit: cover; 之类的内容可能会对您有所帮助。或者只有宽度没有高度。图片resizing/cropping/preview-generation/resolution/etc。可能会很痛苦。
我认为您的反应代码没有问题。当用户上传他们的个人资料时，添加对照片分辨率的限制。您可以自己将图像处理成合适的分辨率，也可以让用户首先上传所需的分辨率。
要将图像裁剪成所需的分辨率，可以使用开源 javascript 插件。我在谷歌搜索时遇到了这个。
Croppie - a simple javascript image cropper
然后在显示图像的地方，为 img 标签添加一个 css 限制，使其成为特定尺寸，例如 100px x 100px。
否则对img标签本身有限制权。
<img src='profile.jpg' width="50" height="50" className='profile-pic'>
我正在构建一个 mern-stack 应用程序并希望用户拥有个人资料图片，所以我创建了一个 API 使用 multer 和 node.js 用于在后端上传图像并响应 dropZone在前端。我在配置文件 vue 中显示图片，但它看起来有点奇怪以适应 space 所以我尝试了一些调整大小的工具，如 react-image-file-resize 但它没有做任何事情。我会附上一张图片来演示。enter image description here 有没有其他方法来修复图像。
enter image description here
处理图像大小调整的方法有很多种。您是否考虑过仅使用 css 来处理它？ object-fit: cover; 之类的内容可能会对您有所帮助。或者只有宽度没有高度。图片resizing/cropping/preview-generation/resolution/etc。可能会很痛苦。
我认为您的反应代码没有问题。当用户上传他们的个人资料时，添加对照片分辨率的限制。您可以自己将图像处理成合适的分辨率，也可以让用户首先上传所需的分辨率。
要将图像裁剪成所需的分辨率，可以使用开源 javascript 插件。我在谷歌搜索时遇到了这个。
Croppie - a simple javascript image cropper
然后在显示图像的地方，为 img 标签添加一个 css 限制，使其成为特定尺寸，例如 100px x 100px。
否则对img标签本身有限制权。
<img src='profile.jpg' width="50" height="50" className='profile-pic'>