在NextJS中,使用时导入图片和直接包含图片有什么区别
next/image
?
import logo from './logo.png';
<Image src={logo} />
/* versus */
<Image src={'/logo.png'} />
(伪代码用于说明目的,语法不正确)
以这种或另一种方式进行时是否有任何速度优化或额外功能?
import
语法让我认为构建时发生了其他事情,但我似乎找不到任何进一步的细节。
查看文档:
必须是以下之一:
- 静态导入的图像文件
- 路径字符串。这可以是绝对外部 URL,也可以是内部路径,具体取决于 loader 属性。
- 使用外部URL时,必须将其添加到next.config.js中的remotePatterns中
还有这里关于本地和远程图像。
长话短说:
import logo from './logo.png';
<Image src={logo} />
logo.png 文件存储在导入组件的旁边。在构建过程中,next.js 会将其移动到 dist 文件夹,确定图像的
width
和 height
属性并将其设置为组件。这将有助于避免图像加载时的布局偏移。
当您提供图像的静态路径时:
<Image src={'/logo.png'} />
您基本上告诉下一步这是一个远程图像,它应该从下一个公共文件夹或远程位置加载。 (如果是
/logo.png
,为了显示图像,应位于此处:public/logo.png
)。