---
title: Using an external image as OG image
description: Learn how to pass the username as a URL parameter to pull an external profile image for the image generation.
url: /kb/guide/using-an-external-dynamic-image
canonical_url: "https://vercel.com/kb/guide/using-an-external-dynamic-image"
last_updated: 2025-11-11
authors: DX Team
related:
  - /docs/og-image-generation
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

You can use the following code sample to explore using parameters and different content types with [`next/og`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx). To learn more about OG Image Generation, see [Open Graph Image Generation](https://vercel.com/docs/og-image-generation).

Create an API route handler:

``import { ImageResponse } from 'next/og'; // App router includes @vercel/og. // No need to install it. export async function GET(request: Request) { const { searchParams } = new URL(request.url); const username = searchParams.get('username'); if (!username) { return new ImageResponse(<>Visit with &quot;?username=vercel&quot;</>, { width: 1200, height: 630, }); } return new ImageResponse( ( <div style={{ display: 'flex', fontSize: 60, color: 'black', background: '#f6f6f6', width: '100%', height: '100%', paddingTop: 50, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }} > <img width="256" height="256" src={`https://github.com/${username}.png`} style={{ borderRadius: 128, }} /> <p>github.com/{username}</p> </div> ), { width: 1200, height: 630, }, ); }``

``import { ImageResponse } from 'next/og'; // App router includes @vercel/og. // No need to install it. export async function GET(request) { const { searchParams } = new URL(request.url); const username = searchParams.get('username'); if (!username) { return new ImageResponse(<>Visit with &quot;?username=vercel&quot;</>, { width: 1200, height: 630, }); } return new ImageResponse( ( <div style={{ display: 'flex', fontSize: 60, color: 'black', background: '#f6f6f6', width: '100%', height: '100%', paddingTop: 50, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }} > <img width="256" height="256" src={`https://github.com/${username}.png`} style={{ borderRadius: 128, }} /> <p>github.com/{username}</p> </div> ), { width: 1200, height: 630, }, ); }``

> If you're not using a framework, you must either add `"type": "module"` to your `package.json` or change your JavaScript Functions' file extensions from `.js` to `.mjs`

Preview the OG route locally by running the following command:

`pnpm dev`

Then, browse to `http://localhost:3000/api/og`. You will see the following image:

## More resources

- [Consume the OG route](/docs/og-image-generation#consume-the-og-route)
  
- [Getting started with OG image](/docs/og-image-generation#usage)