我收到此错误：“所请求的资源不是 /images/crown.png 收到的 text/html 的有效图像；charset=utf-8”

Question

我正在使用 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 架构的工作原理！）。

Answer 1

根据 Next.js 架构，应该有一个名为“public”的文件夹。您应该将应用程序中使用的图像放在那里，而不是放在“styles”等任何其他文件夹中。

Answer 2

如果自托管，您可能需要复制静态资产：

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 文件将自动提供这些服务。