diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
index 434683518e6b1..d6c9b52f6f20b 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
@@ -394,7 +394,7 @@ export default async function Image({ params }) {
 
 #### Using Edge runtime with local assets
 
-This example uses the Edge runtime to fetch a local image on the file system and passes it as an `ArrayBuffer` to the `src` attribute of an `<img>` element.
+This example uses the Edge runtime to fetch a local image on the file system and passes it as an `ArrayBuffer` to the `src` attribute of an `<img>` element. The local asset should be placed relative to the example source file location.
 
 ```jsx filename="app/opengraph-image.js" switcher
 import { ImageResponse } from 'next/og'
@@ -425,14 +425,15 @@ export async function GET() {
 
 #### Using Node.js runtime with local assets
 
-This example uses the Node.js runtime to fetch a local image on the file system and passes it as an `ArrayBuffer` to the `src` attribute of an `<img>` element.
+This example uses the Node.js runtime to fetch a local image on the file system and passes it as an `ArrayBuffer` to the `src` attribute of an `<img>` element. The local asset should be placed relative to the root of your project, rather than the location of the example source file.
 
 ```jsx filename="app/opengraph-image.js" switcher
 import { ImageResponse } from 'next/og'
+import { join } from 'node:path'
 import { readFile } from 'node:fs/promises'
 
 export async function GET() {
-  const logoData = await readFile('./logo.png')
+  const logoData = await readFile(join(process.cwd(), 'logo.png'))
   const logoSrc = Uint8Array.from(logoData).buffer
 
   return new ImageResponse(