如何使用 Next/Image 获取 img 元素的宽度和高度属性
图像正常工作。这是代码
<Image
layout="fixed"
src="/images/example.jpeg"
alt="Example image"
width="140"
height="140"
/>
，但是，当我在web.dev上运行网站时，我不会获得性能的顶级。 主要原因是 图像元素没有明确的宽度和高度
我已经研究过，并且可以从这里分辨出 https://web.dev/poptimize-cls/jutm_sourm_sourm_source = lighthouse＆amp.amp.amp.amp.amm_medium_medium = lrrrrrrr.images-without - 维度 该宽度和高度属性，不会出现？
需要使用Next/Image如何解决
The image is working just fine. Here is the code
<Image
layout="fixed"
src="/images/example.jpeg"
alt="Example image"
width="140"
height="140"
/>
But, when I run the website on web.dev, I don't get a topscore in Performance.
The main reason is Image elements do not have explicit width and height
I've studied this, and can tell from here https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions
That width and height attributes is needed, which don't appear, using next/image
How do I solve this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我面临同样的问题 - 将布局更改为响应式并没有解决问题。
它看起来像是组件缺少支持标签的渲染 - 它实际上应该按照初始灯塔链接中的描述来实现。
I am facing the same issue - changing layout to responsive did not solve the problem.
It rather looks like the component is missing the rendering of the supporting tags - it should actually be implemented as described in the initial lighthouse link.
使用卷曲括号提及大小而不是字符串文字。
使用布局=“响应式”
Use curly braces to mention the size instead of string literals.
Use layout="responsive"