下一页JS图片不加载

问题描述 投票:0回答:1

在我的根项目中,我设置了一个公共支架,有一个 "home.jpg "和 "home-placeholder.jpg "图片文件。

在我的pagesindex.js文件中,我有一个组件可以接收两个图片。

function Page() {
  return (
    <>
      <Head title="Home" />
      <Home>
        <Right
          alt="home-image"
          image="./home.jpg"
          placeholder="./home-placeholder.jpg"
        />
      </Home>
    </>
  );
}

但在我的开发服务器中,我无法得到这些图片,我总是得到: 我总是得到:"无法获取home.jpg

我试过

  • 使用next-images和导入图片。
  • 在我的生产服务器上构建和部署
  • 将公共文件夹的名称改为静态

图像在输出路径.nextstaticimages内正确加载。

reactjs static next.js
1个回答
1
投票

你使用的是自定义的Express Server,而且你缺少Next app requestHandler。

import * as Routes from "~/src/routes";
import express from "express";
import next from "next";

const dev = process.env.NODE_ENV !== "production";
const port = process.env.PORT || 8000;
const app = next({ dev, quiet: false });
const handle = app.getRequestHandler(); // <----

app.prepare().then(() => {
  const server = express();

  server.get("/", async (req, res) => {
    return await Routes.signIn(req, res, app);
  });

  server.all("*", (req, res) => { // <----
    return handle(req, res);
  });

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`Server running on http://localhost:${port}`);
  });
});

看看这个 自定义快递服务器示例 由Next.js。

© www.soinside.com 2019 - 2024. All rights reserved.