<!-- source-hash: d68b2db5f05c474ec9bdb96a22e60341 -->
Thin presentation component that renders a blog post cover image (or OG-generated placeholder) with graceful 404 recovery.

## Key Components

### `BlogImagePlaceholder`
A client-side React component that wraps a cover image in an HTML phrasing-content–safe `<span>`. Key behaviors:

- Returns `null` when `imageUrl` is `null`, rendering nothing
- Uses a plain `<img>` tag (bypasses `next/image`) to support query-string–based dynamic placeholder URLs
- Hides the broken-image icon via `onError` when the URL 404s, letting the parent `bg-ods-bg` background show through cleanly
- Wrapped in `<span className="block">` instead of `<div>` for HTML validity when rendered inside markdown `<p>` tags (e.g., compact `BlogCard` in the chat shell)

### `BlogImagePlaceholderProps`

| Prop | Type | Description |
|------|------|-------------|
| `imageUrl` | `string \| null` | Pre-resolved cover/OG image URL; `null` renders nothing |
| `title` | `string` | Used for the `alt` attribute |
| `className` | `string` | Optional extra Tailwind classes |

## Usage Example

```typescript
import { BlogImagePlaceholder } from './blog-image-placeholder'

// Typical usage in a BlogCard with a pre-resolved OG placeholder URL
<BlogImagePlaceholder
  imageUrl="https://og.flamingo.run/placeholder?title=My+Post&category=devops"
  title="My Post"
  className="rounded-lg"
/>

// When imageUrl is null, renders nothing — safe to use unconditionally
<BlogImagePlaceholder
  imageUrl={null}
  title="Draft Post"
/>
```