但是我在实现 ImageResponse 以作为 NextResponse 返回时遇到了问题。
我有一个问题,我尝试在 app/somedirectory/route.js 中使用 @vercel/og 实现 og 图像生成
但是我在实现 ImageResponse 以作为 NextResponse 返回时遇到了问题。
我收到错误 405 或有时是 500。
关于如何正确实施它的任何想法或代码示例? 我在 App/api/hello/route.js 中尝试了以下内容
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'edge',
};
const ogImage = function () {
return new ImageResponse(
(
<div
style={{
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
}}
>
Hello world!
</div>
),
{
width: 1200,
height: 600,
},
);
}
export async function GET(request) {
return new Response(ogImage)
}
它返回了整个函数
function() {
return new _vercel_og__WEBPACK_IMPORTED_MODULE_1__.ImageResponse(/*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("div", {
style: {
fontSize: 128,
background: "white",
width: "100%",
height: "100%",
display: "flex",
textAlign: "center",
alignItems: "center",
justifyContent: "center"
},
children: "Hello world!"
}, void 0, false, {
fileName: "C:\\Users\\.. ..test\\app\\api\\hello\\route.js",
lineNumber: 10,
columnNumber: 7
}, this), {
width: 1200,
height: 600
});
}
当使用 NextResponse 时,我无法得到任何返回。 当我使用以下
const ogImage = new ImageResponse(
(
<div></div>
);
export async function GET(request) {
return new Response(ogImage)
}
它只是返回[object Response]
终于知道怎么做了:
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'edge',
};
export async function GET(request) {
return new ImageResponse(
(
<div
style={{
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
}}
>
Hello world!
</div>
),
{
width: 1200,
height: 600,
},
);
// return new Response(imageG);
}
这应该放在里面 :
App/directoryName/route.js
这是迄今为止在 NextJs 新 App 结构中从 Api 端点获取 imageResponse 的唯一方法。
它正在接受请求并返回 ImageResponse。 如果 ImageResponse 存储在 const 中,并且 const 与 new Response(const) 一起返回,它将返回 [object response]。