使用“next/image”代替普通的img标签是否更好？如果是，为什么？
我想显示一个图像，但我给宽度和高度的样式。像这样... <img className="img" src='url/img.png'/>
img类给出了自动宽度和高度，单位为rem。我不能使用next/img标记，因为我必须给出宽度，单位为像素，并且不能给出'auto'。有解决办法吗？
我可以用一个div和'img' classname来 Package img标签，并像这样给予layout ='fill'。
import Image from 'next/image';
<div className='img'>
<Image layout='fill' src="lll.jpg"/>
</div>但我觉得没必要。2我想知道你的想法。
1条答案
按热度按时间xnifntxz1#
使用“next/image”代替普通的img标签是否更好？如果是，为什么？
是的，最好使用next/image而不是标准的HTML img标签，因为它的自动优化机制，next/image将使用延迟加载、WebP格式和响应性以最有效的方式加载您的图像，它还将为您处理许多SEO方面的问题，如布局累积布局移位。
请随时查看此答案以了解更多详细信息：https://stackoverflow.com/a/67886607/14900930
至于你的问题，如果你不想指定宽度和高度属性（只支持像素单位）直接到下一个/图像组件你唯一的选择是使用布局=“填充”与位置：相对的父，如他们的文档中提到的.
填充时，图像将同时拉伸宽度和高度到父元素的尺寸，前提是父元素是相对的。
这通常与objectFit属性配对使用。
确保父元素的位置：在样式表中相对。
因此，对于您的方法来说，这是很好的，因为有必要为具有layout ='fill'属性的next/image组件提供一个父组件，只需确保它具有相对位置。
我还建议使用sizes属性来确保为每个设备提供正确的图像，请随时查看他们的文档