Cuttlefish Docs
  • English

    • spz-img

    When to Use

    When you need to display images.

    Code Demonstration

    Basic Usage

    The most basic usage.

    <spz-img
  src="https://img.staticdj.com/7fe3fa83e64a9bd1bd25b09651ce02d3.webp"
  alt="Blueberry"
  object-fit="cover"
  layout="responsive"
  width="1920"
  height="1440"
></spz-img>

    Properties

    Property NameDescriptionTypeDefault ValueRequired
    srcThe path of the image to embed. The same as the src attribute of <img> (reference: img)string-Yes
    altContains a text description of the image. The same as the alt attribute of <img> (reference: img)string-No
    auto-fitIf this attribute exists, optimize the size of the image, only supports the image path that can be accessed by adding a path in the form of x200 before the file type--No
    object-fitThe same as the object-fit property in CSS (reference: object-fit)--No
    object-positionThe same as the object-position property in CSS (reference: object-position)--No
    completeWhen the image is fully loaded, the element will automatically have this attribute added---

    AI Summary (LLM Ready)

    • Component ID: spz-img
    • One-line purpose: Replaces the native img image.
    • Detected attribute rows: 0
    • Detected method subsections: 0
    • Detected event subsections: 0
    • Top attribute names: none (needs manual completion)
    • Top method names: none (needs manual completion)
    • Top event names: none (needs manual completion)
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/