我正在使用 Next.js 并收到此错误。这是代码:
import React from "react";
import { Container, Col, Row } from "react-bootstrap";
import Image from "next/image";
export default function fs() {
return (
<div>
<Container>
<Row>
<Col lg="4" md="4">
<Row>test</Row>
<Row>test</Row>
<Row>test</Row>
</Col>
<Col lg="4" md="4">
<Image width="100%" height="50" src="/images/crown.png" />
</Col>
<Col lg="4" md="4">
</Col>
</Row>
</Container>
</div>
);
}
在多次检查代码后,我发现 images 文件夹不能存在于“styles”文件夹中,它应该位于“public”文件夹中(显然这就是 Next.js 架构的工作原理!)。
根据 Next.js 架构,应该有一个名为“public”的文件夹。您应该将应用程序中使用的图像放在那里,而不是放在“styles”等任何其他文件夹中。
如果自托管,您可能需要复制静态资产:
cp -rn public .next/standalone && cp -rn .next/static .next/standalone/.next/static
{
// ...
"scripts": {
"dev": "next dev",
"build": "NODE_ENV=production next build",
"copy:assets": "cp -rn public .next/standalone && cp -rn .next/static .next/standalone/.next/static",
"start": "node .next/standalone/server.js",
}
}
npm run build
npm run copy:assets
npm run start
# visit http://localhost:3000
.next/
|-- standalone/
|-- public/
|-- .next/
|-- static/
src/
public/
|-- images/
|-- my-logo.jpg
|-- my-icon.jpg
package.json
来自 Next.js docs: 此外,还输出一个最小的 server.js 文件,可以 用于代替下次启动。这个最小的服务器不复制 默认情况下为 public 或 .next/static 文件夹,理想情况下这些应该是 尽管这些文件夹可以复制到 手动独立/公共和独立/.next/static 文件夹,之后 哪个 server.js 文件将自动提供这些服务。