# Image

An in-article image hosted on the SEO for SaaS CDN, with alt text and an optional caption.



## The block

As the API returns it, from the [example article](https://api.seoforsaas.dev/public/v1/fixtures/article):

```json
{
  "type": "image",
  "url": "https://media.seoforsaas.dev/fixtures/kitchen-sink-section.jpg",
  "alt": "A team building a rocket together, a metaphor for launching a page",
  "caption": "Every page starts at step one: being found.",
  "id": "image-5"
}
```

## Replace it

Pass your own component for the type. It receives the block, typed, and every other type keeps its default. The default stays available, so you can wrap it instead of starting over:

```tsx
import { Article, defaultComponents } from "@/components/seoforsaas/article";
import type { ImageBlock } from "@/lib/seoforsaas/types";

const DefaultImage = defaultComponents.image;

function MyImage({ block }: { block: ImageBlock }) {
  return (
    <div className="my-image">
      <DefaultImage block={block} />
    </div>
  );
}

<Article blocks={article.blocks} components={{ image: MyImage }} />
```

## Notes

- `alt` is always present.
- Next.js: swap in `next/image` through `components.image` and allow `media.seoforsaas.dev` in `images.remotePatterns`.