在NextJS中，导入图像和使用next/image时直接包含图像有什么区别？
import logo from './logo.png';
<Image src={logo} />
/* versus */
<Image src={'/logo.png'} />
(Pseudocode for illustrative purposes, not syntactically correct)
以某种方式进行时是否有任何速度优化或额外功能？import语法让我认为在构建时正在发生其他事情，但我似乎找不到任何进一步的细节.
看看docs:
必须是以下之一:
- 静态导入的图像文件
- 路径字符串.这可以是绝对的外部URL，也可以是内部路径，具体取决于loader Prop.
- 使用外部URL时，您必须将其添加到next.pic.js中的remotePatterns
以及here个有关本地和远程图像的信息.
长话短说:
import logo from './logo.png';
<Image src={logo} />
logo.png文件存储在导入它的组件旁边.在构建过程中，next.js会将其移动到dist文件夹，确定图像的width和height属性并将其设置为组件.这将有助于避免图像加载中的布局变化.
当您提供图像的静态路径时:
<Image src={'/logo.png'} />
接下来您基本上告诉您这是一个远程图像，并且应该从下一个公共文件夹或远程位置加载它.(如果是/logo.png，则要显示图像应位于此处:public/logo.png).在这种情况下，您应该手动设置图像宽度和高度属性，或者如果您想启用图像下次优化，则配置remote patterns.