我有一个使用NextJS并部署在Vercel上的项目。我试图使用@vercel/og开放图形图像生成库来生成图像,但不幸的是,每次调用og图像的api路由时,都会导致ERR_MODULE_NOT_FOUND。我已经按照文档中描述的正确设置了所有内容,因此任何帮助都将受到感谢。谢谢!
// File: /api/og/page.js
import { ImageResponse } from "@vercel/og"
export const config = {
runtime: "edge",
}
export default function () {
const { searchParams } = new URL(req.url)
// ?title=<title>
const hasTitle = searchParams.has("title")
const title = hasTitle ? searchParams.get("title")?.slice(0, 100) : "delilah"
return new ImageResponse(
(
<div
style={{
background: "linear-gradient(to bottom right, #246bd7 0%, #169680 30%, #169680 55%, #cc978d)",
backgroundSize: "100% 100%",
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "white",
padding: "50px",
textShadow: "0px 0px 1px black",
}}>
<img src="[img src here]" width={500} style={{ borderRadius: 20 }} />
<div style={{ marginLeft: 50, fontSize: 80, fontWeight: "bold", textShadow: "1px 1px 0px black" }}>
[site description]
</div>
</div>
),
{
width: 1200,
height: 630,
}
)
}
打开/api/og/page时出现错误:
[GET] /api/og/page
10:05:26:94
2023-01-06T16:05:28.862Z f958bf58-52f7-449f-9a45-9e520b88eec9 ERROR Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/app/node_modules/@vercel/og/vendor/resvg.simd.wasm' imported from /var/task/app/node_modules/@vercel/og/dist/index.js
at new NodeError (node:internal/errors:393:5)
at finalizeResolution (node:internal/modules/esm/resolve:328:11)
at moduleResolve (node:internal/modules/esm/resolve:965:10)
at moduleResolveWithNodePath (node:internal/modules/esm/resolve:909:12)
at defaultResolve (node:internal/modules/esm/resolve:1173:79)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
通过将NextJS升级到v12.2.3解决。