docs: fix TS error in Node.js runtime local assets example (#82672)

## What?  
Updated the documentation for `opengraph-image` / `twitter-image` to fix
the **Node.js runtime with local assets** example.

## Why?  
The existing snippet did not type-check cleanly with Next.js 15+ and
could confuse developers.
This update improves developer experience by ensuring the snippet is
immediately usable and accurate.

## How?  
- Reproduced the example in a fresh Next.js 15+ project.  
- Updated the docs example to:  
  - Use `readFile` + Base64 encoding instead of invalid file URLs.  
  - Clarify that assets should be placed relative to the project root.  
- Added an entry to **Version History** noting the update in v15.x.  

## Checklist  
- [x] Ran `pnpm prettier-fix`  
- [x] Verified formatting & linting (`pnpm build && pnpm lint`)  
- [x] Documentation guidelines followed  
- [x] Example verified in a real Next.js 15 project  

Fixes #75583 & #75625 (if considered same class of issue)

---------

Co-authored-by: Joseph <[email protected]>
Co-authored-by: Joseph <[email protected]>

Author: EAzZY-1wnL

docs/01-app/03-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx

@@ -402,7 +402,59 @@ export default async function Image({ params }) {
 
 #### 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. The local asset should be placed relative to the root of your project, rather than the location of the example source file.
+These examples use the Node.js runtime to fetch a local image from the file system and pass it to the `<img>` `src` attribute, either as a base64 string or an `ArrayBuffer`. Place the local asset relative to the project root, not the example source file.
+
+```tsx filename="app/opengraph-image.tsx" switcher
+import { ImageResponse } from 'next/og'
+import { join } from 'node:path'
+import { readFile } from 'node:fs/promises'
+
+export default async function Image() {
+  const logoData = await readFile(join(process.cwd(), 'logo.png'), 'base64')
+  const logoSrc = `data:image/png;base64,${logoData}`
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <img src={logoSrc} height="100" />
+      </div>
+    )
+  )
+}
+```
+
+```jsx filename="app/opengraph-image.js" switcher
+import { ImageResponse } from 'next/og'
+import { join } from 'node:path'
+import { readFile } from 'node:fs/promises'
+
+export default async function Image() {
+  const logoData = await readFile(join(process.cwd(), 'logo.png'), 'base64')
+  const logoSrc = `data:image/png;base64,${logoData}`
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <img src={logoSrc} height="100" />
+      </div>
+    )
+  )
+}
+```
+
+Passing an `ArrayBuffer` to the `src` attribute of an `<img>` element is not part of the HTML spec. The rendering engine used by `next/og` supports it, but because TypeScript definitions follow the spec, you need a `@ts-expect-error` directive or similar to use this [feature](https://github.com/vercel/satori/issues/606#issuecomment-2144000453).
 
 ```tsx filename="app/opengraph-image.tsx" switcher
 import { ImageResponse } from 'next/og'
@@ -422,6 +474,7 @@ export default async function Image() {
           justifyContent: 'center',
         }}
       >
+        {/* @ts-expect-error Satori accepts ArrayBuffer/typed arrays for <img src> at runtime */}
         <img src={logoSrc} height="100" />
       </div>
     )