Img

Lazy image with ratio, placeholder, error

An image that reserves its space, shows a skeleton or a blurred placeholder while it loads, and a marked fallback if it fails. alt is required: describe what the image shows, or pass alt="" for decoration.

Basic

第1話

<script setup lang="ts">
import { BlessImg } from "blessing-ui";
import { shots } from "./_data";
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessImg :src="shots[0].src" alt="Episode 1" ratio="16 / 9" style="width: 240px"
      >第1話</BlessImg
    >
    <BlessImg
      :src="shots[2].src"
      alt="Episode 3"
      :ratio="1"
      :placeholder="shots[6].src"
      style="width: 135px"
    />
    <BlessImg src="/does-not-exist.png" alt="Missing still" ratio="4 / 3" style="width: 160px" />
  </div>
</template>

• ratio holds the space before load, so nothing jumps. loading="eager" for the image at the top of the page.
• A broken image shows the error mark, named by alt, instead of the browser's broken-image icon.

Usage

import { BlessImg } from "blessing-ui";

API

Props

Name	Type	Default	Description
src*	string	—
alt*	string	—
ratio	string | number	—	e.g. 16 / 9 or "4 / 5"; omit to use the image's own
fit	"fill" | "none" | "cover" | "contain"	"cover"
loading	"lazy" | "eager"	"lazy"	eager for above-the-fold images
placeholder	string	—	tiny blurred placeholder (data URL / LQIP)
srcset	string	—
sizes	string	—

Slots

Name	Scope	Description
error	—
default	—