/public/favicon/mail.png
=〉“/favicon/mail.png”将可以正常工作

请参见https://nextjs.org/docs/basic-features/static-file-serving
Next.js可以提供静态文件，比如图像，在根目录下的public文件夹下，然后你的代码可以从基本URL（/）开始引用public中的文件。

从Next.jsv11开始，您可以在不进行任何额外配置的情况下完成您正在做的事情：

import macbookIphone from '../../assets/images/mac-iphone.jpg';

<Image src={macbookIphone} />

// or

<img src={macbookIphone.src} />

参考：next/image
对于早期版本，如果您希望导入图像而不是将其放在公共目录中，则可以配置file-loader或url-loader。

至少在我们的项目中，我们使用require for images而不是import。我们的下一个配置看起来和你的很相似。
请尝试以下操作，看看是否有帮助：

const macbookIphone = require('../../assets/images/mac-iphone.jpg');

然后，您可以使用图像作为src，如下所示：

<img src={macbookIphone}/>

在Next.js中使用图像有点不同：
所有静态资源（如图像）都必须放在public目录中。

• 如果您的代码在***src***目录下，即<app-name>/src/pages , <app-name>/src/components, ...，则您的公用文件夹必须在src目录之外。公用文件夹不能在src下作为<app-name>/src/public.在这种情况下，您的公用目录必须在<app-name>/public下。
• 如果您的代码 * 不 * 在***src***目录下，例如<app-name>/pages, <app-name>/components, ...，那么您的public目录应该在<app-name>/public下

排序后，直接引用next/image提供的<Image />组件中的文件，如下所示：

import Image from "next/image"
<Image src="/sample-image.png" width="64" height="64" />

或

import Image from "next/image"
import sampleImage from "<file-path>"

<Image src={sampleImage} width="64" height="64" />

前提是您在 * public/sample-image.png * 下有一个文件
如果您有图像URL，请直接将其提供给“src”属性。
有关布局的描述性示例，请访问：https://github.com/vercel/next.js/tree/canary/examples/image-component
参考文献：

1. https://nextjs.org/docs/basic-features/static-file-serving
2. https://nextjs.org/docs/api-reference/next/image
3. https://nextjs.org/docs/basic-features/image-optimization
4. https://nextjs.org/docs/advanced-features/src-directory

可以使用next-images导入图像

步骤1

npm install --save next-images
或
yarn add next-images

步骤2

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

用于打印脚本

// Add following line in next-env.d.ts
/// <reference types="next-images" />

重新启动服务器，现在您可以导入图像，如
import img1 from "assets/images/cover_images/blog_1.png"
https://github.com/twopluszero/next-images

它对我来说是这样的，但是把文件放到公共文件夹中：

<Image width={150} height={100} src={'/punkieslogo.png'} alt="Picture of the author" />

您无法像在React.js中一样访问Next.js中图像，除非它们存储在'public'文件夹中