Image

<script setup lang="ts">
import { Image } from "@bysages/vue";

const SAMPLE = "https://picsum.photos/seed/elements-image/800/500";
</script>

<template>
  <!-- The frame is the consumer's to size; the picture dissolves in
       over the skeleton's breath. -->
  <Image :src="SAMPLE" alt="A photograph from the archive" class="w-full aspect-[8/5]" />
</template>

<script setup lang="ts">
import { Image } from "@bysages/vue";
</script>

<template>
  <!-- A broken source falls back — to the caller's words when they
       have them, to the quiet glyph when they do not. -->
  <div class="grid grid-cols-2 gap-4 w-full">
    <Image
      src="https://missing.invalid/absent.png"
      alt="A missing photograph"
      class="w-full aspect-[16/9]"
    >
      <span class="text-sm text-tertiary"> The negative could not be developed. </span>
    </Image>
    <Image
      src="https://missing.invalid/absent.png"
      alt="A missing photograph"
      class="w-full aspect-[16/9]"
    />
  </div>
</template>

<script setup lang="ts">
import { Image } from "@bysages/vue";

const SAMPLE = "https://picsum.photos/seed/elements-image/800/500";

const fits = [
  { fit: "cover", caption: "Cover crops to fill" },
  { fit: "contain", caption: "Contain keeps the whole" },
  { fit: "fill", caption: "Fill stretches" },
] as const;
</script>

<template>
  <div class="grid w-full grid-cols-3 gap-4">
    <figure v-for="entry in fits" :key="entry.fit" class="m-0">
      <Image :src="SAMPLE" :alt="entry.caption" :fit="entry.fit" class="w-full aspect-square" />
      <figcaption class="mt-2 text-sm text-secondary">
        {{ entry.caption }}
      </figcaption>
    </figure>
  </div>
</template>