时间戳

首页 > 解决方案 > 未找到公共文件夹中的下一个 js 图像

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

问题描述

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

公共目录是由 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="…&quot;/>
          </a>)
        })}
      </div>
    </>
  );
}

但是，在本地运行项目时出现 404 错误。我需要任何额外的配置吗？我没有在这个案例的文档中看到它。我尝试重建但仍然没有。

顺便说一句，使用 Next 的 Image 组件和 htmlimg标记也会发生同样的情况。我正在使用下一个版本 10.0.2。

标签： reactjsimagenext.jsserver-side-rendering

解决方案

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

推荐阅读