在我的根项目中,我设置了一个公共支架,有一个 "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
我试过
图像在输出路径.nextstaticimages内正确加载。
你使用的是自定义的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。