Image

<script lang="ts">
	import Image from '@tcpsystems/ui/foundation/Image';
	const src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%23334'/%3E%3C/svg%3E";
</script>

<Image {src} alt="Deployments dashboard showing three healthy services" width={320} height={180} />

<script lang="ts">
	import Image from '@tcpsystems/ui/foundation/Image';
	import Text from '@tcpsystems/ui/foundation/Text';
</script>

<Image src="" alt="Maria Chen" width={320} height={180}>
	{#snippet fallback()}
		<Text tone="muted">No photo uploaded for Maria Chen.</Text>
	{/snippet}
</Image>