How to handle images
- Images
- Svelte
A preview of a post.
A PostPreview component has the following properties:
| Prop | Required | Description |
|---|---|---|
value | yes | Type Post (post from a content collection). |
as | no | Heading element for the title (h2–h6, default: h2). |
class | no | Additional Tailwind classes. |
The first example shows a PostPreview with a normal length title and normal length tags:
<script lang="ts">
import { PostPreview } from '$lib/components/index.js';
const post = {
title: 'How to handle images',
description:
'Adding images to Markdown files has changed. This post explains how to embed images.',
author: {
id: 'thilo',
name: 'Thilo Maier',
initials: 'TM',
url: 'https://bsky.app/profile/maier.tech',
imageUrl: 'https://maier.tech/assets/portrait-thilo-maier.jpg',
_meta: {
filePath: 'thilo.json',
fileName: 'thilo.json',
directory: '.',
extension: 'json',
path: 'thilo'
}
},
publishedDate: '2025-10-08',
lastmodDate: '2025-10-15',
tags: [
{
id: 'images',
label: 'Images',
path: '/',
_meta: {
filePath: 'images.json',
fileName: 'images.json',
directory: '.',
extension: 'json',
path: 'images'
}
},
{
id: 'svelte',
label: 'Svelte',
path: '/',
_meta: {
filePath: 'svelte.json',
fileName: 'svelte.json',
directory: '.',
extension: 'json',
path: 'svelte'
}
}
],
_meta: {
filePath: 'how-to-handle-images/+page.md',
fileName: '+page.md',
directory: 'how-to-handle-images',
extension: 'md',
path: 'how-to-handle-images/+page'
},
path: '/posts/how-to-handle-images'
};
</script>
<PostPreview value={post} as="h3" />
The second example shows a PostPreview with longer tags that wrap across multiple lines:
<script lang="ts">
import { PostPreview } from '$lib/components/index.js';
const post = {
title: 'How to handle images',
description:
'Adding images to Markdown files has changed. This post explains how to embed images.',
author: {
id: 'thilo',
name: 'Thilo Maier',
initials: 'TM',
url: 'https://bsky.app/profile/maier.tech',
imageUrl: 'https://maier.tech/assets/portrait-thilo-maier.jpg',
_meta: {
filePath: 'thilo.json',
fileName: 'thilo.json',
directory: '.',
extension: 'json',
path: 'thilo'
}
},
publishedDate: '2026-06-20',
lastmodDate: '2025-06-21',
tags: [
{
id: 'image-optimization',
label: 'Image Optimization',
path: '/',
_meta: {
filePath: 'image-optimization.json',
fileName: 'image-optimization.json',
directory: '.',
extension: 'json',
path: 'image-optimization'
}
},
{
id: 'responsive-design',
label: 'Responsive Design',
path: '/',
_meta: {
filePath: 'responsive-design.json',
fileName: 'responsive-design.json',
directory: '.',
extension: 'json',
path: 'responsive-design'
}
},
{
id: 'web-performance',
label: 'Web Performance',
path: '/',
_meta: {
filePath: 'web-performance.json',
fileName: 'web-performance.json',
directory: '.',
extension: 'json',
path: 'web-performance'
}
},
{
id: 'accessibility',
label: 'Accessibility',
path: '/',
_meta: {
filePath: 'accessibility.json',
fileName: 'accessibility.json',
directory: '.',
extension: 'json',
path: 'accessibility'
}
}
],
_meta: {
filePath: 'how-to-handle-images/+page.md',
fileName: '+page.md',
directory: 'how-to-handle-images',
extension: 'md',
path: 'how-to-handle-images/+page'
},
path: '/posts/how-to-handle-images'
};
</script>
<PostPreview value={post} as="h3" />