...export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url); // The below is dependent on whether the username and image are passed as query params or not. const username = searchParams.get('username') || 'User'; // Username of the user const imageUrl = searchParams.get('image') || ''; // Image url of the user const backgroundGradient = '#2D1B69'; // Background color of the image // Load Inter font from the public folder const interFontData = await fetch( `${request.nextUrl.origin}/Inter.ttf` ).then((res) => res.arrayBuffer()); return new ImageResponse( ( // Generate the image here ); } catch (e) { console.error('Error generating OG image:', e); return new Response('Failed to generate image', { status: 500 }); }}...
import { ImageResponse } from '@vercel/og';import { NextRequest } from 'next/server';// Generate the image for every requestexport const dynamic = "force-dynamic";export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url); // The below is dependent on whether the username and image are passed as query params or not. const username = searchParams.get('username') || 'User'; // Username of the user const imageUrl = searchParams.get('image') || ''; // Image url of the user return new ImageResponse( ( // Generate the image here ); } catch (e) { console.error('Error generating OG image:', e); return new Response('Failed to generate image', { status: 500 }); }}
为您的 Mini App 添加可分享元素,让用户可以通过 Mini App 分享生成的图片。下面是一个用于生成并分享自定义图片的按钮示例:
export default function GenerateAndShareCustomImage() {... const handleGenerateCustomOGImage = () => { // Generate the image using the endpoint const ogImageUrl = `${APP_URL}/api/og?username=${username}&image=${pfpUrl}`; // Programmatically compose a cast with the generated image actions?.composeCast({ // Text to be displayed in the cast text: "I generated a custom OG image using Monad Mini App template", // Image to be displayed in the cast embeds: [ogImageUrl], }); };... return ( <button type="button" className="bg-white text-black rounded-md p-2 text-sm" /** * When the button is clicked, the shareable image is generated * and the cast is composed. */ onClick={() => handleGenerateCustomOGImage()} disabled={!fid} > Generate Custom Image </button> );}
⌘I
{"docsConfig":{"theme":"almond","$schema":"https://mintlify.com/docs.json","name":"Monad Documentation","colors":{"primary":"#836EF9","light":"#836EF9","dark":"#836EF9"},"logo":{"light":"https://mintcdn.com/monadfoundation-40611fb6/gCj3ii1FXtCtIson/static/logo/full-mark-light.png?fit=max\u0026auto=format\u0026n=gCj3ii1FXtCtIson\u0026q=85\u0026s=2a722496725c21beb43e852aed0b0395","dark":"https://mintcdn.com/monadfoundation-40611fb6/gCj3ii1FXtCtIson/static/logo/full-mark-dark.png?fit=max\u0026auto=format\u0026n=gCj3ii1FXtCtIson\u0026q=85\u0026s=4616a760e77429106496e25ad2118d82"},"favicon":"https://mintcdn.com/monadfoundation-40611fb6/s6h_OLLbfu4wHJ0k/static/logo/logo.png?fit=max\u0026auto=format\u0026n=s6h_OLLbfu4wHJ0k\u0026q=85\u0026s=9a25dea71921eb4dbbc995fbb064cfbb","navbar":{"links":[{"icon":"arrow-up-right","href":"https://www.monad.xyz/blog","label":"Blog"},{"icon":"arrow-up-right","href":"https://app.monad.xyz","label":"Try Monad"}]},"footer":{"socials":{"x":"https://x.com/monad","discord":"https://discord.gg/monad","github":"https://github.com/monad-crypto"}},"fonts":{"heading":{"family":"Inter"},"body":{"family":"Inter"}},"icons":{"library":"lucide"},"styling":{"eyebrows":"breadcrumbs","latex":true},"contextual":{"options":["copy","view","assistant"],"display":"header"},"navigation":{"languages":[{"language":"en","default":true,"href":""},{"language":"zh","href":"zh"}]}},"deployment":{"deploymentMetadataValue":{"subdomain":"monadfoundation-40611fb6","hasAudioNarration":false,"actualSubdomain":"monadfoundation-40611fb6","customDomains":["docs.monad.xyz"],"gitSource":{"type":"github","owner":"monad-crypto","repo":"docs","deployBranch":"main","contentDirectory":"docs","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6adf61c0d1c84ec1c210a8f3","collectionId":"ccf8ace9-e6f8-48ba-a59b-7b19dc7f6134","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6adf61c0d1c84ec1c210a8f3"},"feedback":{"agentFeedback":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6adf61c0d1c84ec1c210a8f3","clientVersion":"0.0.4044","searchFilterCounts":[{"language":"en","tag":"Documentation","count":121},{"language":"zh","tag":"文档","count":116},{"language":"en","tag":"Guides","count":47},{"language":"en","tag":"Node Operations","count":44},{"language":"zh","tag":"指南","count":43},{"language":"zh","tag":"节点运维","count":40},{"language":"en","tag":"Operations","count":31},{"language":"zh","tag":"运维","count":27},{"language":"en","tag":"Tooling and Infrastructure","count":26},{"language":"en","tag":"Upgrade Instructions","count":25},{"language":"zh","tag":"工具和基础设施","count":25},{"language":"zh","tag":"JSON-RPC","count":23},{"language":"en","tag":"Learn","count":21},{"language":"en","tag":"Monad Architecture","count":21},{"language":"zh","tag":"学习","count":21},{"language":"zh","tag":"Monad 架构","count":21},{"language":"zh","tag":"升级说明","count":21},{"language":"en","tag":"Reference","count":20},{"language":"en","tag":"Developer Essentials","count":15},{"language":"zh","tag":"开发者要点","count":15}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"style.css","content":".dark{--gray-50:248 248 251;--gray-100:245 244 247;--gray-200:232 231 235;--gray-300:219 218 221;--gray-400:181 180 184;--gray-500:129 129 133;--gray-600:100 100 104;--gray-700:85 84 89;--gray-800:62 62 65;--gray-900:49 49 53;--gray-950:38 37 41}#content-container{padding-left:1.5rem;padding-right:1.5rem}@media (min-width:1024px){#content-container{padding-left:4rem;padding-right:4rem}}#content-container>div{padding-left:0}@media (min-width:1024px) and (max-width:1280px){#content-container>div{justify-content:start}}#table-of-contents-layout{width:16rem}#content-area{max-width:45rem}#content-area:has(.rpc-sandbox){max-width:70rem}.nav-logo{height:1.5rem}.navbar-link{border:0!important;background:0 0!important;padding:0!important;border-radius:0!important}.navbar-link a{flex-direction:row-reverse;gap:.25rem!important}.dark .navbar-link a{color:rgb(var(--gray-400))!important}.dark .navbar-link a:hover{color:rgb(var(--gray-300))!important}.navbar-link a svg{margin-bottom:-1px;opacity:.4;height:.8rem!important;width:.8rem!important}nav ul.flex{column-gap:1rem}h2,h3,h4{padding-bottom:.5rem}.tab-container{margin-top:-.5rem}[data-component-part=callout-content] ul{margin-left:-4px}[data-component-part=card-content] span{font-size:14px}.mintlify-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.mintlify-table-wrapper .mintlify-table{width:100%}.mintlify-table th{text-align:left}.mintlify-table td[data-numeric]{font-variant-numeric:tabular-nums}.mintlify-table code,[data-table-wrapper] code{white-space:nowrap}[data-table-wrapper] td{min-width:0!important}"}],"page":{"pagePath":"zh/templates/farcaster-miniapp/generating-custom-og-images","slug":"/zh/templates/farcaster-miniapp/generating-custom-og-images","pageMetadata":{"title":"如何在 Farcaster Mini App 中生成用户专属图片","description":null,"href":"/zh/templates/farcaster-miniapp/generating-custom-og-images"},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,p:`p`,pre:`pre`,span:`span`,..._provideComponents(),...props.components},{CodeBlock,Heading,OptimizedImage}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`在 Farcaster Mini App 中创建可分享的时刻是与用户互动的好方法。`}),`\n`,_jsx(_components.p,{children:`您可以在 Farcaster Mini App 中生成自定义的、用户专属的可分享图片,让用户轻松分享!`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/1.png?fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=23af840b83021b5ae591865658fbb22e`,alt:`Example`,\"data-og-width\":`600`,width:`600`,\"data-og-height\":`400`,height:`400`,\"data-path\":`static/img/templates/farcaster-miniapp/generating-custom-og-images/1.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/1.png?w=280\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=f2fd66492f3e732fd9a02687960890b7 280w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/1.png?w=560\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=eab9fc92ad0fb303eb526f0222f0ee12 560w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/1.png?w=840\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=71d2d70bbfa5df28ff5d01ac44d756c9 840w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/1.png?w=1100\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=df212f69816aef4c028a90c7a049f2df 1100w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/1.png?w=1650\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=b2b7bf26a23ec26a64b537978eeefd77 1650w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/1.png?w=2500\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=28ae41222d734a17683194a53c500d3f 2500w`}),`\n`,_jsxs(_components.p,{children:[`在本指南中,我们设置了一个专用端点 `,_jsx(_components.code,{children:`/api/og`}),` 用于生成图片,并使用 `,_jsx(_components.code,{children:`@vercel/og`}),` 包来生成图片。`]}),`\n`,_jsx(Heading,{level:`2`,id:`生成图片`,children:`生成图片`}),`\n`,_jsxs(_components.p,{children:[`如果您使用的是 `,_jsx(_components.a,{href:`https://github.com/monad-developers/monad-miniapp-template`,children:`Monad Mini App 模板`}),`,只需编辑 `,_jsx(_components.a,{href:`https://github.com/monad-developers/monad-miniapp-template/blob/main/app/api/og/route.tsx`,children:_jsx(_components.code,{children:`app/api/og/route.tsx`})}),` 即可生成您想要的图片。`]}),`\n`,_jsx(CodeBlock,{filename:`app/api/og/route.tsx`,lines:`true`,numberOfLines:`28`,language:`typescript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`28`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`...`})}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`export`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` async`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` function`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` GET`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:`request`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`:`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` NextRequest`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` try`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` { `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:`searchParams`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` new`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` URL`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`request`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`url`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // The below is dependent on whether the username and image are passed as query params or not.`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` username`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` searchParams`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`get`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'username'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`||`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'User'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`; `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Username of the user`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` imageUrl`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` searchParams`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`get`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'image'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`||`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` ''`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`; `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Image url of the user`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` `})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` backgroundGradient`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` '#2D1B69'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`; `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Background color of the image`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` `})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // Load Inter font from the public folder`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` interFontData`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` await`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` fetch`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:\" `\"}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#569CD6`},children:\"${\"}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`request`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`nextUrl`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`origin`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#569CD6`},children:`}`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:\"/Inter.ttf`\"})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` ).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`then`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`((`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:`res`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`=>`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` res`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`arrayBuffer`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`());`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` `})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` return`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` new`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` ImageResponse`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` (`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // Generate the image here`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` );`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`catch`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` (`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`e`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` console.error(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'Error generating OG image:'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, e);`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` return new `}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Response`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'Failed to generate image'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, { `}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:`status`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`500`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` });`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}`})}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`...`})}),`\n`]})})}),`\n`,_jsxs(_components.p,{children:[`如果您没有使用该模板,则需要安装 `,_jsx(_components.code,{children:`@vercel/og`}),` 包。`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`shellscript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`shellscript`,children:_jsxs(_components.code,{language:`shellscript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#DCDCAA`},children:`npm`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` install`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` @vercel/og`})]}),`\n`]})})}),`\n`,_jsxs(_components.p,{children:[`如果您使用 Next.js 14 或更高版本,请创建一个新文件 `,_jsx(_components.code,{children:`app/api/og/route.tsx`}),`。`]}),`\n`,_jsx(CodeBlock,{filename:`app/api/og/route.tsx`,lines:`true`,numberOfLines:`23`,language:`typescript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`23`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` { `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`ImageResponse`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` '@vercel/og'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` { `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`NextRequest`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'next/server'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Generate the image for every request`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`export`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` dynamic`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"force-dynamic\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`export`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` async`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` function`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` GET`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:`request`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`:`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` NextRequest`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` try`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` { `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:`searchParams`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` new`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` URL`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`request`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`url`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` `})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // The below is dependent on whether the username and image are passed as query params or not.`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` username`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` searchParams`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`get`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'username'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`||`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'User'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`; `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Username of the user`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` imageUrl`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` searchParams`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`get`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'image'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`||`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` ''`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`; `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Image url of the user`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` `})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` return`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` new`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` ImageResponse`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` (`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // Generate the image here`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` );`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`catch`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` (`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`e`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` console.error(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'Error generating OG image:'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, e);`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` return new `}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Response`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'Failed to generate image'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, { `}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:`status`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`500`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` });`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}`})}),`\n`]})})}),`\n`,_jsx(_components.p,{children:`如果您没有使用 Next.js,可以设置一个端点或专用微服务来生成图片。`}),`\n`,_jsx(Heading,{level:`2`,id:`通过-mini-app-分享图片`,children:`通过 Mini App 分享图片`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/2.png?fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=309ea3febb0e5a88e4dc42669e0a0ecd`,alt:`来自 EGGS Mini App 的示例,提示用户 cast 一张自定义生成的图片`,style:{marginLeft:`auto`,marginRight:`auto`},\"data-og-width\":`600`,width:`600`,\"data-og-height\":`400`,height:`400`,\"data-path\":`static/img/templates/farcaster-miniapp/generating-custom-og-images/2.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/2.png?w=280\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=9aa96455809c368a0ae485fd93d80b00 280w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/2.png?w=560\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=41f0a9c80af55bb96ff7b774d4d83f9a 560w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/2.png?w=840\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=355ab9c3a8c7c6b81f8219b65ba6713e 840w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/2.png?w=1100\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=479f063bfcf288dc866b83f1d39ca8d4 1100w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/2.png?w=1650\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=76e08287033625cb96ba10804dfd8ce0 1650w, https://mintcdn.com/monadfoundation-40611fb6/-TCPhWHMfGzx9j3a/static/img/templates/farcaster-miniapp/generating-custom-og-images/2.png?w=2500\u0026fit=max\u0026auto=format\u0026n=-TCPhWHMfGzx9j3a\u0026q=85\u0026s=141591bf094ad8639a2970e8b7ebe881 2500w`}),`\n`,_jsx(_components.p,{children:`为您的 Mini App 添加可分享元素,让用户可以通过 Mini App 分享生成的图片。`}),`\n`,_jsx(_components.p,{children:`下面是一个用于生成并分享自定义图片的按钮示例:`}),`\n`,_jsx(CodeBlock,{filename:``,lines:`true`,numberOfLines:`35`,language:`tsx`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`tsx`,children:_jsxs(_components.code,{language:`tsx`,numberOfLines:`35`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`export`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` default`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` function`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` GenerateAndShareCustomImage`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#D4D4D4`},children:`() `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`{`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`...`})}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` handleGenerateCustomOGImage`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` () `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`=>`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // Generate the image using the endpoint`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` ogImageUrl`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:\" `\"}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#569CD6`},children:\"${\"}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:`APP_URL`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#569CD6`},children:`}`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`/api/og?username=`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#569CD6`},children:\"${\"}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`username`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#569CD6`},children:`}`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\u0026image=`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#569CD6`},children:\"${\"}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`pfpUrl`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#569CD6`},children:`}`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:\"`\"}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // Programmatically compose a cast with the generated image`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` actions`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`?.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`composeCast`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // Text to be displayed in the cast`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` text:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"I generated a custom OG image using Monad Mini App template\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // Image to be displayed in the cast`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` embeds:`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` [`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`ogImageUrl`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`],`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` });`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` };`})}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`...`})}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` return`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` (`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:` \u003c`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`button`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` type`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"button\"`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` className`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"bg-white text-black rounded-md p-2 text-sm\"`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` /**`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * When the button is clicked, the shareable image is generated `})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * and the cast is composed.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` */`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` onClick`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`{`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`() `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`=>`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` handleGenerateCustomOGImage`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`()`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`}`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` disabled`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`{`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`!`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`fid`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`}`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:` >`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` Generate Custom Image`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:` \u003c/`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`button`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` );`})}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}`})}),`\n`]})})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"如何在 Farcaster Mini App 中生成用户专属图片","description":null,"href":"/zh/templates/farcaster-miniapp/generating-custom-og-images"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"生成图片","slug":"生成图片","depth":2,"children":[]},{"title":"通过 Mini App 分享图片","slug":"通过-mini-app-分享图片","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"monadfoundation-40611fb6","siteName":"Monad Documentation","title":"如何在 Farcaster Mini App 中生成用户专属图片 - Monad Documentation","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{"en":{"href":"/templates/farcaster-miniapp/generating-custom-og-images","matchLevel":1},"zh":{"href":"/zh/templates/farcaster-miniapp/generating-custom-og-images","matchLevel":0}}},"lastModified":"2026-10-22T07:46:35.361Z","originalFileLocation":"zh/templates/farcaster-miniapp/generating-custom-og-images.mdx","locale":"zh"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"application-name\" content=\"Monad Documentation\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"如何在 Farcaster Mini App 中生成用户专属图片 - Monad Documentation\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Monad Documentation\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://monadfoundation-40611fb6.mintlify.app/_mintlify/api/og/v2?division=Farcaster+%E5%B0%8F%E7%A8%8B%E5%BA%8F\u0026amp;title=%E5%A6%82%E4%BD%95%E5%9C%A8+Farcaster+Mini+App+%E4%B8%AD%E7%94%9F%E6%88%90%E7%94%A8%E6%88%B7%E4%B8%93%E5%B1%9E%E5%9B%BE%E7%89%87\u0026amp;theme=171188bc67c569b02dd6a816\u0026amp;signature=573577e346e55244e492468f951e8ec908538c8a1818a7a82cca66216f87e047\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"如何在 Farcaster Mini App 中生成用户专属图片 - Monad Documentation\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://monadfoundation-40611fb6.mintlify.app/_mintlify/api/og/v2?division=Farcaster+%E5%B0%8F%E7%A8%8B%E5%BA%8F\u0026amp;title=%E5%A6%82%E4%BD%95%E5%9C%A8+Farcaster+Mini+App+%E4%B8%AD%E7%94%9F%E6%88%90%E7%94%A8%E6%88%B7%E4%B8%93%E5%B1%9E%E5%9B%BE%E7%89%87\u0026amp;theme=171188bc67c569b02dd6a816\u0026amp;signature=573577e346e55244e492468f951e8ec908538c8a1818a7a82cca66216f87e047\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/monadfoundation-40611fb6/YjcmBhDdRfmiXYK3/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Monad Documentation\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#836EF9\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/zh/templates/farcaster-miniapp/generating-custom-og-images.md\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"zh\" href=\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"en\" href=\"https://docs.monad.xyz/templates/farcaster-miniapp/generating-custom-og-images\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"x-default\" href=\"https://docs.monad.xyz/templates/farcaster-miniapp/generating-custom-og-images\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.monad.xyz/#organization\",\"name\":\"Monad Documentation\",\"url\":\"https://docs.monad.xyz\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/monadfoundation-40611fb6/gCj3ii1FXtCtIson/static/logo/full-mark-light.png?fit=max\u0026auto=format\u0026n=gCj3ii1FXtCtIson\u0026q=85\u0026s=2a722496725c21beb43e852aed0b0395\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.monad.xyz#website\",\"name\":\"Monad Documentation\",\"url\":\"https://docs.monad.xyz\",\"publisher\":{\"@id\":\"https://docs.monad.xyz/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images#webpage\",\"url\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images\",\"name\":\"如何在 Farcaster Mini App 中生成用户专属图片\",\"dateModified\":\"2026-10-22T07:46:35.361Z\",\"isPartOf\":{\"@id\":\"https://docs.monad.xyz#website\"},\"breadcrumb\":{\"@id\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"指南\",\"item\":\"https://docs.monad.xyz/zh/guides/index\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"模板\",\"item\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/getting-started\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Farcaster 小程序\",\"item\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/index\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"如何在 Farcaster Mini App 中生成用户专属图片\",\"item\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images#article\",\"headline\":\"如何在 Farcaster Mini App 中生成用户专属图片\",\"name\":\"如何在 Farcaster Mini App 中生成用户专属图片\",\"url\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images\",\"mainEntityOfPage\":{\"@id\":\"https://docs.monad.xyz/zh/templates/farcaster-miniapp/generating-custom-og-images#webpage\"},\"dateModified\":\"2026-10-22T07:46:35.361Z\",\"publisher\":{\"@id\":\"https://docs.monad.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.monad.xyz#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Monad Documentation\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Monad Documentation","nav":{"global":null,"languages":[{"language":"en","default":true,"pages":[{"title":"en","href":"/templates/farcaster-miniapp/generating-custom-og-images"}]},{"language":"zh","tabs":[{"tab":"文档","groups":[{"group":"简介","pages":[{"title":"简介","href":"/zh"},{"title":"为何选择区块链?","href":"/zh/introduction/why-blockchain"},{"title":"为何选择 Monad:去中心化 + 性能","href":"/zh/introduction/why-monad"},{"title":"面向用户的 Monad","href":"/zh/introduction/monad-for-users"},{"title":"面向开发者的 Monad","href":"/zh/introduction/monad-for-developers"}]},{"group":"开发者要点","pages":[{"title":"开发者要点","sidebarTitle":"开始使用","href":"/zh/developer-essentials/index"},{"group":"网络信息 - 主网","root":{"title":"网络信息 - 主网","href":"/zh/developer-essentials/network-information/index"},"pages":[{"title":"代币和跨链桥","href":"/zh/developer-essentials/network-information/tokens-and-bridges"}]},{"title":"网络信息 - 测试网","href":"/zh/developer-essentials/testnet"},{"title":"面向开发者的部署摘要","href":"/zh/developer-essentials/summary"},{"title":"Monad 与以太坊的差异","href":"/zh/developer-essentials/differences"},{"title":"交易","href":"/zh/developer-essentials/transactions"},{"title":"钱包开发者集成指南","sidebarTitle":"钱包开发者","href":"/zh/developer-essentials/wallet-developers"},{"title":"Gas 定价","href":"/zh/developer-essentials/gas-pricing"},{"title":"Opcode 定价","href":"/zh/developer-essentials/opcode-pricing"},{"title":"预编译","href":"/zh/developer-essentials/precompiles"},{"title":"储备余额","href":"/zh/developer-essentials/reserve-balance"},{"title":"Monad 上的 EIP-7702","href":"/zh/developer-essentials/eip-7702"},{"title":"历史数据","href":"/zh/developer-essentials/historical-data"},{"title":"构建高性能应用的最佳实践","href":"/zh/developer-essentials/best-practices"},{"group":"更新日志","root":{"title":"变更日志","href":"/zh/developer-essentials/changelog/index"},"pages":[{"title":"发布记录","href":"/zh/developer-essentials/changelog/releases"}]}]},{"group":"工具和基础设施","pages":[{"title":"工具和基础设施","sidebarTitle":"开始使用","href":"/zh/tooling-and-infra/index"},{"title":"智能体支付","href":"/zh/tooling-and-infra/agentic-payments"},{"title":"分析","href":"/zh/tooling-and-infra/analytics"},{"title":"区块浏览器","href":"/zh/tooling-and-infra/block-explorers"},{"title":"卡片发行","href":"/zh/tooling-and-infra/card-issuing"},{"title":"跨链","href":"/zh/tooling-and-infra/cross-chain"},{"title":"托管","href":"/zh/tooling-and-infra/custody"},{"title":"收益/理财基础设施","href":"/zh/tooling-and-infra/earn-yield"},{"group":"索引器","root":{"title":"索引器","href":"/zh/tooling-and-infra/indexers/index"},"pages":[{"title":"通用数据","href":"/zh/tooling-and-infra/indexers/common-data"},{"title":"索引框架","href":"/zh/tooling-and-infra/indexers/indexing-frameworks"}]},{"title":"法币入金","href":"/zh/tooling-and-infra/onramps"},{"title":"预言机","href":"/zh/tooling-and-infra/oracles"},{"title":"支付编排","href":"/zh/tooling-and-infra/payment-orchestrators"},{"title":"隐私","href":"/zh/tooling-and-infra/privacy"},{"title":"RPC 提供商","href":"/zh/tooling-and-infra/rpc-providers"},{"group":"工具包","root":{"title":"工具包","href":"/zh/tooling-and-infra/toolkits/index"},"pages":[{"title":"Foundry","href":"/zh/tooling-and-infra/toolkits/foundry"},{"title":"Hardhat","href":"/zh/tooling-and-infra/toolkits/hardhat"},{"title":"Monad Solonet","href":"/zh/tooling-and-infra/toolkits/monad-solonet"}]},{"group":"钱包","root":{"title":"钱包","href":"/zh/tooling-and-infra/wallets/index"},"pages":[{"title":"软件钱包","href":"/zh/tooling-and-infra/wallets/software-wallets"},{"title":"硬件钱包","href":"/zh/tooling-and-infra/wallets/hardware-wallets"},{"title":"机构钱包","href":"/zh/tooling-and-infra/wallets/institutional-wallets"},{"title":"多签钱包","href":"/zh/tooling-and-infra/wallets/multisig-wallets"}]},{"group":"钱包基础设施","root":{"title":"钱包基础设施","href":"/zh/tooling-and-infra/wallet-infra/index"},"pages":[{"title":"嵌入式钱包","href":"/zh/tooling-and-infra/wallet-infra/embedded-wallets"},{"title":"账户抽象提供商","href":"/zh/tooling-and-infra/wallet-infra/account-abstraction"},{"title":"智能账户实现","href":"/zh/tooling-and-infra/wallet-infra/smart-accounts"}]}]},{"group":"JSON-RPC","pages":[{"group":"JSON-RPC","pages":[{"title":"JSON-RPC 概述","sidebarTitle":"概述","href":"/zh/reference/json-rpc/overview"},{"title":"JSON-RPC Playground","sidebarTitle":"Playground","mode":"wide","href":"/zh/reference/json-rpc/playground"},{"title":"JSON-RPC API 参考","sidebarTitle":"API","href":"/zh/reference/json-rpc/api"}]},{"group":"执行事件","pages":[{"title":"执行事件","href":"/zh/execution-events/index"},{"title":"发布说明","href":"/zh/execution-events/release-notes"},{"group":"入门","root":{"title":"开始使用","href":"/zh/execution-events/getting-started/index"},"pages":[{"title":"构建 C 示例程序","href":"/zh/execution-events/getting-started/c"},{"title":"构建 Rust 示例程序","href":"/zh/execution-events/getting-started/rust"},{"title":"在快照数据上运行示例程序","href":"/zh/execution-events/getting-started/snapshot"},{"title":"搭建您的 Monad 节点","href":"/zh/execution-events/getting-started/setup-node"},{"title":"在实时数据上运行示例程序,以及后续步骤","href":"/zh/execution-events/getting-started/final"}]},{"title":"执行事件概述","href":"/zh/execution-events/overview"},{"title":"event ring 详解","href":"/zh/execution-events/event-ring"},{"title":"C API","href":"/zh/execution-events/c-api"},{"title":"Rust API","href":"/zh/execution-events/rust-api"},{"title":"共识事件","href":"/zh/execution-events/consensus-events"},{"title":"进阶内容","href":"/zh/execution-events/advanced"}]},{"group":"质押","pages":[{"title":"质押概述","sidebarTitle":"概述","href":"/zh/reference/staking/overview"},{"title":"质押 API 参考","sidebarTitle":"API","href":"/zh/reference/staking/api"}]},{"group":"机器支付协议","pages":[{"title":"MPP 概述","sidebarTitle":"概述","href":"/zh/reference/mpp/overview"},{"title":"MPP API 参考","sidebarTitle":"API","href":"/zh/reference/mpp/api"}]}]},{"group":"指南","pages":[{"title":"指南","sidebarTitle":"开始使用","href":"/zh/guides/index"},{"group":"将 Monad 添加到钱包","root":{"title":"将 Monad 添加到钱包","href":"/zh/guides/add-monad-to-wallet/index"},"pages":[{"title":"将 Monad 主网添加到钱包","href":"/zh/guides/add-monad-to-wallet/mainnet"},{"title":"将 Monad 测试网添加到钱包","href":"/zh/guides/add-monad-to-wallet/testnet"}]},{"group":"部署合约","root":{"title":"部署合约","href":"/zh/guides/deploy-smart-contract/index"},"pages":[{"title":"使用 Foundry 在 Monad 上部署智能合约","href":"/zh/guides/deploy-smart-contract/foundry"},{"title":"使用 Hardhat 在 Monad 上部署智能合约","href":"/zh/guides/deploy-smart-contract/hardhat"},{"title":"使用 Remix 在 Monad 上部署智能合约","href":"/zh/guides/deploy-smart-contract/remix"}]},{"group":"验证合约","root":{"title":"验证合约","href":"/zh/guides/verify-smart-contract/index"},"pages":[{"title":"使用 Foundry 在 Monad 上验证智能合约","href":"/zh/guides/verify-smart-contract/foundry"},{"title":"使用 Hardhat 在 Monad 上验证智能合约","href":"/zh/guides/verify-smart-contract/hardhat"}]},{"group":"使用索引器","root":{"title":"使用索引器","href":"/zh/guides/indexers/index"},"pages":[{"title":"如何使用 GhostGraph 索引代币转账","href":"/zh/guides/indexers/ghost"},{"title":"如何使用 Envio HyperIndex 构建转账通知机器人","href":"/zh/guides/indexers/tg-bot-using-envio"},{"title":"如何使用 Envio HyperSync 查询代币数据","href":"/zh/guides/indexers/token-snapshot-hypersync"},{"title":"如何使用 QuickNode Streams 索引每一笔 WMON 转账","href":"/zh/guides/indexers/quicknode-streams"}]},{"title":"使用 NFT 构建","sidebarTitle":"使用 NFT 构建","href":"/zh/guides/build-with-nfts"},{"group":"执行事件","root":{"title":"如何使用执行事件(Execution Events)加速您的应用","href":"/zh/guides/execution-events/index"},"pages":[{"title":"设置执行事件","href":"/zh/guides/execution-events/setup"},{"title":"如何在 Rust 中消费执行事件","href":"/zh/guides/execution-events/consume-rust"}]},{"group":"EVM 资源","root":{"title":"EVM 资源","href":"/zh/guides/evm-resources/index"},"pages":[{"title":"EVM 行为","href":"/zh/guides/evm-resources/evm-behavior"},{"title":"Solidity 资源","href":"/zh/guides/evm-resources/solidity-resources"},{"group":"其他语言","root":{"title":"其他语言","href":"/zh/guides/evm-resources/other-languages/index"},"pages":[{"title":"Vyper","href":"/zh/guides/evm-resources/other-languages/vyper"},{"title":"Yul","href":"/zh/guides/evm-resources/other-languages/yul"}]}]},{"group":"更多指南","pages":[{"title":"如何使用 Scaffold-ETH 构建基础 dApp","href":"/zh/guides/scaffold-eth"},{"title":"使用 Brale 在 Monad 上发行自定义稳定币","href":"/zh/guides/brale"},{"title":"如何使用 Reown AppKit 将钱包连接到您的应用","href":"/zh/guides/reown"},{"group":"Mera","root":{"title":"如何使用 Mera 创建 passkey 账户","href":"/zh/guides/mera"},"pages":[{"title":"如何在 React Native 中使用 Mera","href":"/zh/guides/mera/react-native"}]},{"title":"如何构建可与 Monad 测试网交互的 MCP 服务器","href":"/zh/guides/monad-mcp"},{"title":"如何设置支持 Monad 的 x402 启用端点","href":"/zh/guides/x402"},{"title":"如何在 Monad 上注册和使用 ERC-8004(Trustless Agents)构建","href":"/zh/guides/erc-8004"},{"title":"如何在 Monad 上使用 ERC-6551(代币绑定账户)构建","sidebarTitle":"ERC-6551(代币绑定账户)","href":"/zh/guides/erc-6551"},{"title":"如何让您的 Monad 合约支持清晰签名(ERC-7730)","href":"/zh/guides/clear-signing"},{"title":"如何使用 Moralis API 构建投资组合查看器","href":"/zh/guides/moralis-api"},{"title":"如何使用 Kuru Flow 在您的应用中添加代币兑换","href":"/zh/guides/kuru-flow"},{"title":"如何在基于 Expo 的移动应用中构建自定义深度链接","href":"/zh/guides/deeplinks-using-expo"}]},{"group":"模板","pages":[{"group":"Farcaster 小程序","root":{"title":"Farcaster Mini Apps","href":"/zh/templates/farcaster-miniapp/index"},"pages":[{"title":"如何构建 Farcaster Mini App","href":"/zh/templates/farcaster-miniapp/getting-started"},{"title":"如何向 Farcaster Mini App 用户发送通知","href":"/zh/templates/farcaster-miniapp/sending-notifications"},{"title":"如何发布 Farcaster Mini App","description":null,"href":"/zh/templates/farcaster-miniapp/publishing-miniapp"},{"title":"如何在 Farcaster Mini App 中生成用户专属图片","href":"/zh/templates/farcaster-miniapp/generating-custom-og-images"},{"title":"如何为 Farcaster Mini App 添加 haptics","description":null,"href":"/zh/templates/farcaster-miniapp/haptics"}]},{"title":"如何使用 React Native Privy 嵌入式钱包模板","href":"/zh/templates/react-native-privy-embedded-wallet"},{"title":"如何使用 React Native 赞助交易模板","href":"/zh/templates/react-native-privy-pimlico-sponsored-transactions"},{"title":"如何使用 React Native Thirdweb 嵌入式钱包模板","href":"/zh/templates/react-native-thirdweb-embedded-wallet"},{"title":"如何使用 Next.js PWA Privy 嵌入式钱包模板","href":"/zh/templates/next-serwist-privy-embedded-wallet"},{"title":"如何使用 Next.js PWA 赞助交易模板","href":"/zh/templates/next-serwist-privy-smart-wallet"},{"title":"如何使用 Next.js Serwist 0x Privy 嵌入式钱包模板","href":"/zh/templates/next-serwist-0x-privy-embedded-wallet"},{"title":"如何使用 Next.js Serwist Thirdweb 嵌入式钱包模板","href":"/zh/templates/next-serwist-thirdweb"}]}]},{"group":"资源","pages":[{"title":"常见问题","href":"/zh/faq"},{"title":"Monad 官方链接:官网、Discord、X 与 Telegram","sidebarTitle":"官方链接","href":"/zh/official-links"},{"title":"安全","href":"/zh/security"}]},{"group":"面向 AI 智能体","pages":[{"title":"面向 AI 智能体的当前事实","href":"/zh/ai/current-facts"},{"title":"Monad 开发者文档 - AI 索引","href":"/zh/ai/developers"},{"title":"Monad JSON-RPC 文档 - AI 索引","href":"/zh/ai/rpc"},{"title":"Monad 节点运维文档 - AI 索引","href":"/zh/ai/node-ops"},{"title":"Monad 架构文档 - AI 索引","href":"/zh/ai/architecture"}]}]},{"tab":"学习","pages":[{"title":"学习","href":"/zh/monad-arch"}]},{"tab":"节点运维","pages":[{"title":"节点运维","href":"/zh/node-ops"}]}]}]},"basePath":"","title":"如何在 Farcaster Mini App 中生成用户专属图片 - Monad Documentation","buildId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","deploymentId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","dynamics":["a74be98ba7"],"chunks":["zoom-image-lightbox-BG6oD64b.js","lightbox-handle-r17bVUz3.js"]}