from the docs:
Next.js可以提供静态文件，比如图像，在根目录中一个叫做public的文件夹下，public中的文件可以被你的代码从基URL（/）开始引用。
因此，首先将图像添加到public/my-image.png，然后可以引用它：

<img src="/my-image.png" />

我认为next.js会监视这个目录，这样你就不需要每次在那里放东西时都重新启动服务器。

静态目录已弃用。请将文件放在public/static目录中

另一种方法是找出Next Images

• • 安装**：第一个月

或yarn add next-images

• • 用途**：

在项目中创建next.config.js

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

或者，您可以添加自定义Next.js配置作为参数

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

在组件或页面中，只需导入图像：

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>

或

import myImg from './my-image.jpg'

export default () => <div>
  <img src={myImg} />
</div>

从Next.js v11起，现在可以直接import映像，而无需任何额外的配置或依赖项。官方示例（我的评论）：

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src={profilePic} alt="Picture of the author" />
      {/* <img src={profilePic.src} alt="Picture of the author" /> */}
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

文件：next/image

下一个10+要提供优化的映像：

import Image from 'next/image'
<Image src={'banner.jpg'} alt='Home Page' width={100} height={100} />

将映像放置在公用文件夹中。所有引用的映像在生成时必须存在于公用文件夹中。映像热部署将不适用于驻留在公用文件夹中的映像。您还可以使用<Image>标记引用跨域映像。

<Image src={'https://www.example.com/banner.jpg'} alt='Home Page' width={100} height={100} />

要允许跨域映像，请确保将以下条目添加到next.config.js

module.exports = {
images: {
    domains: ['www.example.com'],
},

}

我喜欢做的是使用environment variables.in next.js他们很容易设置在next.config.js文件，如下所示：

// next.config.js

module.exports = {
    env: {
      PUBLIC_URL: '/',
    }
};

然后你可以使用process.env.PUBLIC_URL直接到你的public路径，不管它在哪里，如下所示：

<img src={`${process.env.PUBLIC_URL}/my-image.jpg`} />

使用PUBLIC_URL环境变量比硬编码路径的优点是当文件排列改变时你可以使用另一个路径（如在服务器中）.这样你就可以有条件地设置在生产和开发中使用哪个PUBLIC_URL值.

更新

有时，与next/Image not showing一起使用的图像的问题是没有设置正确的layout值，或者在与layout而不是fill一起使用时缺少width和height属性。
使用Next.js版本13的Image组件与之前的版本稍有不同。实际上更容易，您可以更轻松地使用优化功能。在此版本中：

• 你没有义务在next.config.js中设置domains。
• 你可以设置图像的宽度和高度，或者设置为fill，并使用样式或类名来处理它的大小，这意味着你可以设置最大高度或最大宽度。因此，在这种情况下，你不知道你的图像的宽度和高度，它将正确显示。
• 以及它以前的版本，您可以使用priority和...

我将在这里添加一个明显的案例，这通常很容易被遗忘。当你重新构建一个站点页面，而我们的IDE“默默地失败”更新一个相关文件/组件的路径时，或者只是当你更累或分心时，它会不断出现。
如果您正在使用文件夹中的页面，例如：mysiteDomain/pagefolder/page在使用相对路径时要小心。类似<img src="logo.png" />的内容应该改为<img src="../logo.png" />，因为编译后的页面也将位于文件夹pagefolder中。src属性中的路径将相对于编译后的页面。
作为一种替代方法，您可以简单地使用绝对路径，例如<img src="/logo.png" />。src属性中的路径将相对于站点的编译根目录。

请勿将public放入/src中！
在我的例子中，我有一个src目录，我把我的pages等等放在其中，这是一个描述为here的选项，但是我也不小心把public目录移到了那里，这会把nextjs弄得一团糟--你需要把public放在根目录中。