Base64 Image Cannot Display(1.4.0) #183
Description
Bug Description
I used the latest streamdown version 1.4.0 ("streamdown": "^1.4.0"), and when testing markdown rendering, images in base64 format could not be displayed normally, and I actively set the harden parameter allowDataImages to true
Steps to Reproduce
run my code can br reproduce
Expected Behavior
Base64 image show normal
Actual Behavior
Actual Base64 image can't display
Code Sample
"use client";
import { useState } from 'react';
import { Play, Pause } from 'lucide-react';
import { Streamdown, defaultRehypePlugins } from 'streamdown';
import { harden } from 'rehype-harden';
const sampleMarkdown = ``;
function App() {
const [isStreaming, setIsStreaming] = useState(false);
const [streamedContent, setStreamedContent] = useState('');
const startStreaming = () => {
setStreamedContent(sampleMarkdown)
setIsStreaming(false);
};
const reset = () => {
setStreamedContent('');
setIsStreaming(false);
};
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
<div className="max-w-5xl mx-auto px-4 py-12">
<div className="mb-8 text-center">
<h1 className="text-4xl font-bold text-slate-800 mb-3">
Streamdown Demo
</h1>
<p className="text-slate-600 mb-6">
Real-time Markdown streaming preview using streamdown 1.4.0
</p>
<div className="flex gap-3 justify-center">
<button
onClick={startStreaming}
disabled={isStreaming}
className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed transition-colors shadow-md"
>
<Play size={18} />
{isStreaming ? 'Streaming...' : 'Start Stream'}
</button>
<button
onClick={reset}
disabled={isStreaming}
className="flex items-center gap-2 px-6 py-3 bg-slate-600 text-white rounded-lg hover:bg-slate-700 disabled:bg-slate-400 disabled:cursor-not-allowed transition-colors shadow-md"
>
<Pause size={18} />
Reset
</button>
</div>
</div>
<div className="bg-white rounded-xl shadow-xl p-8 border border-slate-200">
<Streamdown parseIncompleteMarkdown={true} isAnimating={true}
rehypePlugins={[
defaultRehypePlugins.raw,
defaultRehypePlugins.katex,
[
harden,
{
defaultOrigin: '*',
allowedLinkPrefixes: ['*'],
allowedImagePrefixes: ['*'],
allowDataImages: true
},
],
]}
>
{streamedContent}
</Streamdown>
</div>
</div>
</div>
);
}
export default App;Streamdown Version
1.4.0
React Version
18.2.0
Node.js Version
20.19.2
Browser(s)
Chrome
Operating System
macOS
Additional Context
sampleMarkdown content is:
# Welcome to Streamdown Demo
This is a **streaming markdown** preview demo powered by [streamdown](https://github.com/vercel/streamdown).
## Features
- **Real-time streaming**: Watch markdown render as it streams in
- **Full markdown support**: Including lists, code blocks, and more
- **Beautiful rendering**: Clean and professional appearance
### Base64 Image Example
### Regular Image Example
### Flowchart Example
\`\`\`mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> B
\`\`\`
### Sequence Diagram
\`\`\`mermaid
sequenceDiagram
participant User
participant API
participant Database
User->>API: Request data
API->>Database: Query
Database-->>API: Results
API-->>User: Response
\`\`\`
### Code Example
\`\`\`typescript
const greeting = "Hello, World!";
console.log(greeting);
\`\`\`
### Table Example
|First Name|Last Name|Age|
|---|---|---|
|John|Doe|99|
|Jane|Doo|29|
|Black|Smith|49|
### Link Example
Welcome to www.slingacademy.com. You can find more sample data at(http://www.slingacademy.com)
### Emoji Example
🚀 Built with Next.js 14 and TypeScript
💅 Styled with Tailwind CSS and shadcn/ui
🔐 Authentication (login/signup/password reset)
🌐 Internationalization with next-intl
📝 Blog functionality with dynamic routes
🌗 Theme switching support
📱 Responsive design
### Lists Example
1. First item
2. Second item
3. Third item
- Bullet point one
- Bullet point two
- Bullet point three