导入图像与将它们包含在内联NextJS

Question

在NextJS中，使用时导入图片和直接包含图片有什么区别

next/image

？

import logo from './logo.png';
<Image src={logo} />

/* versus */

<Image src={'/logo.png'} />

（伪代码用于说明目的，语法不正确）

以这种或另一种方式进行时是否有任何速度优化或额外功能？

import

语法让我认为构建时发生了其他事情，但我似乎找不到任何进一步的细节。

Answer 1

查看文档：

必须是以下之一：

• 静态导入的图像文件
• 路径字符串。这可以是绝对外部 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

）。