如何在 next.js 中获取图像宽度/高度？

Posted 2023-03-06

【中文标题】如何在 next.js 中获取图像宽度/高度？

【英文标题】：How to get image width/height in next.js?

【发布时间】：2021-08-15 04:52:41

【问题描述】：

在我的应用中，我允许用户上传他们的图片。上传后进入公共文件夹，在数据库中只有一个直接链接供将来请求。

在页面上显示这些图像时，我遇到了问题。 Image 组件想知道每个图像的高度和宽度。所以我也想知道。

在这种情况下，工作流有哪些可用选项？上传和请求时的处理都对我有用。

【问题讨论】：

您是否考虑过使用layout="fill" 而不是提供尺寸？

@juliomalves 我试过了，但是正常工作似乎太麻烦了。以相同的结果和更少的工作量，我可以使用我在项目中使用的 SemanticUI 库中的图像组件。到目前为止，我认为Image 弊大于利。

【参考方案1】：

你可以使用图片大小的 npm 模块：

npm install image-size --save

然后：

var sizeOf = require('image-size');
var dimensions = sizeOf('./sample.jpg');
console.log(dimensions.width, dimensions.height);

来自：How to check an image dimensions using js or node