[求助] nuxt-og-image 自定义模板在 Cloudflare Pages 渲染超时

各位大佬好，请教一个问题。

我的平台是一个学习网站，我希望用户在学习完后点击分享到 Twitter 中能够展示一个比较美观的缩略图卡片，提高点击率。

网站是用 Nuxt 编写的，刚好发现 nuxt-og-image 完全符合我的需求。我编写了一个模板，本地测试没问题。

我的网站是部署在 CloudFlare Pages 中，我发现使用默认的模板可以正常渲染，但使用我自定义的模板访问 OG 图片就会提示超出 CPU 时间限制。

因此我升级了 CloudFlare ，使用付费版发现还是不行。

这是我的代码，感觉也不是很复杂

<template> <div style=" width: 1200px; height: 630px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(145deg, #ffffff 30%, #0ea5e9 100%); border-radius: 32px; font-family: sans-serif; color: #111827; position: relative; overflow: hidden; padding: 80px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); " > <p style=" font-size: 32px; font-weight: 700; color: #0284c7; margin: 0 0 30px 0; " > xxxxxxxxx! </p> <h1 style=" font-size: 76px; font-weight: 900; margin: 0 0 25px 0; line-height: 1.2; " > xxxxxxxx </h1> <p style=" font-size: 28px; font-weight: 600; color: #374151; margin: 0 0 35px 0; max-width: 900px; line-height: 1.3; " > xxxxxxxx </p> <p style=" font-size: 36px; font-weight: 900; color: #0284c7; margin: 0 0 10px 0; " > Alice </p> <div style=" width: 80px; height: 4px; background: #0284c7; border-radius: 2px; margin: 0 0 30px 0; " ></div> <p style=" font-size: 24px; color: #374151; margin: 0 0 40px 0; font-weight: 500; " > xxxxxxx </p> <div style=" position: absolute; right: 80px; bottom: 60px; font-size: 200px; color: rgba(16, 185, 129, 0.05); " > </div> <div style=" font-size: 20px; font-weight: 400; /* 普通字重 */ color: #6b7280; /* 淡灰色 */ position: absolute; bottom: 35px; /* 靠近底部 */ text-align: center; " > Shared from xxxxxx </div> </div> </template> 

请教各位大佬，有没有比较简洁快速的解决方案。