Preview
Image Preview
Render images directly from any URL. Native <img> under the hood — no decode in JS, no canvas conversion.
Extensions: jpg, jpeg, png, gif, webp, avif, svg
Loading strategy
<img
src={url}
alt={filename}
onLoad={...}
onError={...}
/>That's the entire previewer. The browser's image pipeline handles decoding, color management, animation (GIF, animated WebP/AVIF), and progressive rendering. The previewer adds:
- A header bar with filename, dimensions (after
onLoad), and a download button. - A loading placeholder while the request is in flight.
- An error card if the request fails (network, 4xx, 5xx, or decode error).
SVG safety
SVG can contain <script> tags. Rendering as an <img src> rather than inline (or via <object>) means the browser ignores the scripts entirely, regardless of source. There is no DOMPurify pass — the browser's own image sandbox is the security boundary.
If you need SVGs to behave as DOM (interactive paths, CSS theming), do not use <FilePreview>; render the SVG yourself with proper sanitization.
Hard size limit
Default: 20 MB. When meta.size > limits.imageMaxBytes, the previewer renders a "too large" placeholder without fetching. Override per-instance:
<FilePreview url={url} limits={{ imageMaxBytes: 100 * 1024 * 1024 }} />The limit only applies when size is known (passed via prop, or resolved by HEAD probe). Without size, the image loads regardless — there is no streaming abort path for <img>. See Size Strategy for why this is hard rather than soft.
Live demo
The third tile below is configured with size={50_000_000} and filename="huge.png" to trigger the "too large" placeholder against a 20 MB default limit.
import { FilePreview } from '@vuer-ai/vuer-m3u/preview'
export function MyComponent() {
return (
<FilePreview url="/vuer-m3u-demo/preview/images/sample.svg" />
)
}