未找到公共文件夹中的下一个 js 图像答案

【问题标题】：Next js image in public folder not found未找到公共文件夹中的下一个 js 图像
【发布时间】：2021-05-23 21:07:37
【问题描述】：

我正在尝试使用与Nextjs documentation 中所述完全相同的图像，也就是说：

图像存储在 src/public 中
我在我的页面中使用路径/my-image.jpg。

公共目录是由 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 的 Image 组件以及 html img 标签也会发生同样的情况。我正在使用下一个版本 10.0.2。

【问题讨论】：

标签： reactjs image next.js server-side-rendering

【解决方案1】：

****如果您显示了代码会有所帮助。

如果您使用的图像不是来自 src/public 或本地文件夹，则必须在 next.config.js 文件中指定图像的来源。

另外 404 错误是因为未找到，这意味着如果您已正确完成所有操作，那么 Next.js 在定位您的图像时会遇到一些困难。

提示*

尝试正确检查图像名称。
尝试重新启动服务器。

【讨论】：

我正在尝试使用来自src/pages/posts/index.js 的图像。我多次重建并重新启动应用程序，但无济于事。
呼叫位置无关紧要。你能把代码给我看一下吗
我刚刚用我尝试使用图像的文件编辑了帖子。
img 标签是自闭合的，宽度和高度也是不可接受的，像在 img 标签中这样尝试用旧的传统方法给出它
那是 next 的 Image 组件的残余。我在那里重置它。

【解决方案2】：

万一其他人遇到这个问题，问题是由于某种原因我的项目是在src 文件夹中创建的。接下来希望它位于项目的最基础目录中，就在 node_modules 等旁边。

【讨论】：