下一次构建后的下一个 JS 图像提供 404 个图像答案

【问题标题】：Next JS Images after next build gives 404 images下一次构建后的下一个 JS 图像提供 404 个图像
【发布时间】：2021-05-25 10:11:54
【问题描述】：

默认 URL 结构是 http://localhost:5000/_next/image?url="someURL"。

我希望 URL 类似于 http://localhost:5000/demo/_next/image?url="someURL"。

这可以通过

// next.config.js
     images: {
            domains: ['example.domain.com'],
            path: `/demo/_next/image`
        },

这里找不到目录指向的_next/image。

在这之后，所有的图像都给404。我需要在下一个js中解决这个问题。

【问题讨论】：

path 用于在使用 cloud provider for the image optimization 时添加前缀，它不会更改 Next.js 优化图像的路径。
@juliomalves 是的，你是对的，我的问题是在我构建下一个 JS 项目之后。我不希望下一个具有这样路径的 js-Image 默认优化 (localhost:5000/_next/image?url="some URL".)。紧跟在 localhost 之后。我希望它与我的 url 前缀 (localhost:5000/demo/_next/image) 一起发生。
@juliomalves 因为这个问题。我在图像中使用了路径。因为资产前缀：'/demo/'不适用于图像。因此无法获得图像优化的好处next js 提供。
您是否尝试过使用basePath？它会改变所有文件的路径，而不仅仅是图像。
@juliomalves 是 basePath 添加，但生成的图像给出 404。因为下一个 js demo/_next/image 未路由到我的节点 js 服务器中的任何位置。我不知道它的路由_next/image 路径路由它的哪个文件夹。我将它路由到 .next 文件夹，但在我的情况下它不起作用

标签： node.js reactjs next.js nextjs-image

【解决方案1】：

您是否尝试过创建一个中间件来将这些路由重写到正确的位置？

类似： pages/_middleware.ts 内容：

import { NextRequest, NextResponse } from 'next/server';

export function middleware(req: NextRequest): NextResponse {
  if (req.nextUrl.href.includes('/demo/_next/image'))
    return NextResponse.rewrite(
      req.nextUrl.href.replace('/demo/_next/image', '/_next/image'),
    );

  return null;
}

【讨论】：