[英]Lower quality images in Next.js "Image" vs. normal "img" tag
I'm working with Next.js, and for some reason my images are looking somewhat blurry when I use Next/Image .我正在使用 Next.js,由于某种原因,当我使用Next/Image时,我的图像看起来有些模糊。
Here's what my code looks like:这是我的代码的样子:
<img src={url} width={articleWidth} />
<Image
className="text-center"
src={url}
alt={alt}
width={width}
height={height}
/>
Here's what the images look like (it might be a bit difficult to tell but the Next/Image
version is clearly blurrier on my monitor).这是图像的样子(可能有点难以分辨,但
Next/Image
版本在我的显示器上显然更模糊)。
A few other pieces of info I noticed我注意到的其他一些信息
img
tag had an intrinsic size of 2016 x 1663
and the version using Next/Image
had an intrinsic size of 750x615
img
标签的版本的固有大小为2016 x 1663
,使用Next/Image
的版本的固有大小为750x615
How do I make Next/Image
images look just as clear as my regular img
component如何使
Next/Image
图像看起来像我的常规img
组件一样清晰
Next.js creates versions of your image on run time and serves the apt sized image to render. Next.js 在运行时创建图像的版本并提供适当大小的图像进行渲染。
If you want to opt out of it:如果您想选择退出:
unoptimized
prop:unoptimized
的道具: <Image
className="text-center"
src={url}
alt={alt}
width={width}
height={height}
unoptimized
/>
or,或者,
unoptimized
option in next.config.js
:next.config.js
中的unoptimized
选项:module.exports = {
images: {
unoptimized: true,
},
}
When above is set true images will be served as is, without any size change.当上述设置时,真实图像将按原样提供,没有任何大小变化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.