静态加载 NextJS 图像在生产环境中给出 404，但在本地主机上工作答案

【问题标题】：Statically loading NextJS Image gives 404 on production but works on localhost静态加载 NextJS 图像在生产环境中给出 404，但在本地主机上工作
【发布时间】：2023-02-01 20:04:13
【问题描述】：

我不明白为什么在生产环境中找不到静态图像，但可以在本地主机上使用。我把我所有的图片都放在目录中：public/images/...

/* image.tsx */
return (
<Image
  src={"/images/frame1.png"}
  width="1000"
  height="1000"
  alt="Control description"
  style={{
    height: "auto",
    maxWidth: "100%",
    userSelect: "none",
  }}
/>
)

/* next.config.js */

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = nextConfig;

Cloudflare 页面部署：

本地主机：

我的文件结构：

【问题讨论】：

标签： next.js nextjs-image cloudflare-pages nextjs13

【解决方案1】：

第一的: 你试过换<Image/> to <img/>吗？对此进行测试，看看它是否已修复（只是为了确定问题出在哪里）

第二试试这个：将图像文件的名称从大写字母更改为小写字母。

【讨论】：

从 <Image/> 更改为 <img/> 确实修复了它，所以它绝对是 nextjs 特定的问题。我所有文件的名称都已经小写了。

【解决方案2】：

那还是个问题。

我有同样的情况，next/image 没有从“public”文件夹中加载生产中的图像。

【讨论】：