Media

import { mediaField } from "@/fields/media"
import type { Block } from "payload"

export const ExampleBlock: Block = {
  slug: "example",
  interfaceName: "Example",
  fields: [
    // your other fields
    mediaField,
  ],
}

import type { Example, Media } from "@/payload-types"
import Image from "next/image"

export function ExampleBlock(props: Example) {
  const media = props.media
  if (!media) return null

  return (
    <Image
      src={media.url}
      alt={media.alt ?? ""}
      width={media.width ?? 0}
      height={media.height ?? 0}
    />
  )
}