NextJS优先级和未优化的图像没有正确加载宽度和高度

Question

<Image
id={`img_${index}`}
key={`img_${index}`}
src={url}
alt={url}
unoptimized={true}
priority={true}
layout="fill"
objectFit='contain'
onLoadingComplete={() => {
if (!loadedUrls.includes(url)) {
setLoadedUrls((loadedUrls) => [...loadedUrls.filter(x => x !== url), url])
}
}}
/>

出于某种原因，在桌面上这项工作非常好。但在iOS上，有时我不得不刷新页面以显示图像。我在iPhone上用Inspector进行了检查，从静态源图像文件来看，图像没有宽度或适当的高度。然而，当我在最初下载图像后重新加载页面时，它是正确的。为什么？

Answer 1

通常，您应该提供width/height，除非它是一个静态导入的文件，接下来可以在构建时进行分析。

根据您提供的代码，看起来src={url}将评估为图像路径，而不是静态图像，即

import profilePic from '../public/me.png

参见宽度的文档注释

图像的宽度，以像素为单位。必须是不带单位的整数。必需，静态导入的图像或布局为"的图像除外；填充"；。

如果它的布局发生了变化，您也可以使用纵横比