Next.js 10.0.2引用public目录图片本地运行报404错误

按照Next.js官方文档说明的方式使用图片，遵循的配置规则为：

• 图片存放在src/public目录下
• 页面中使用/my-image.jpg这类绝对路径引用图片

当前项目的public目录是Create Next App初始化项目时自动生成的，在src/pages/posts/index.js中引入图片的代码如下：

import React from "react";

import Head from "next/head";
import Image from 'next/image'


const articlesList = [
  {title: "Article 1", classes: 'grid-element--triple-width grid-element--double-height'}, 
  {title: "Article 2"}, 
  {title: "Article 3", }, 
  {title: "Article 4", classes: 'grid-element--double-height'}, 
  {title: "Article 5"}, 
  {title: "Article 6"}, 
  {title: "Article 7"}, 
  {title: "Article 8"}, 
  {title: "Article 9"}, 
  {title: "Article 10"}, 
  {title: "Article 11", classes: 'grid-element--double-width grid-element--double-height'}, 
]

export default function Blog() {
  return (
    <>
      <Head>
        <title>Blog</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <div className="blog-grid">
        {articlesList.map(article => {
          const {title, classes} = article
          return (<a href="/posts/first" className={`grid-element ${classes}`} key={title} >
          <Image src="/IMG_1419.jpg" width={500} height={300} alt="…"/>
          </a>)
        })}
      </div>
    </>
  );
}

本地运行项目时遇到图片404错误，在官方文档中没有找到对应场景需要的额外配置说明，尝试重新构建项目也未能解决问题。无论使用Next.js的Image组件，还是原生HTML的img标签，都会出现完全相同的报错，当前使用的Next版本为10.0.2。

报错的核心根源是public目录的存放路径不符合版本要求：

• Next.js 10 版本的静态资源解析规则规定，public目录必须放置在项目根目录，不能嵌套在src目录内部。
• 按照当前将public目录放在src/public的项目结构，Next.js不会识别该目录下的静态文件，会直接返回404。该报错和使用Image组件还是原生img标签无关，本质是静态资源没有被正确托管。
• 操作方式：将src/public整个文件夹移动到项目根目录，与src文件夹保持平级即可，页面内的图片引用路径不需要额外修改——根目录下public文件夹的文件，天生就映射到根路径的URL地址。

内容的提问来源于stack exchange，提问作者ElDuderino