Cuttlefish Docs
  • 简体中文

    • spz-img 图片

    何时使用

    需要显示图片时。

    代码演示

    基本用法

    最基本用法。

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

    属性

    属性名说明类型默认值是否必需
    src要嵌入的图片的路径。与 <img> 的src属性一样（参考：img）string-是
    alt包含一条对图像的文本描述。与 <img> 的alt属性一样（参考：img）string-否
    auto-fit如果该属性存在，对图片进行大小优化，仅图片路径支持在文件类型前面加 x200 形式的路径还可以访问才支持--否
    object-fit与CSS的 object-fit 属性一样（参考：object-fit）--否
    object-position与CSS的 object-position 属性一样（参考：object-position）--否
    complete当图片加载完成时，元素会自动加入该属性---
    fallback当图片加载失败时，如存在此属性则不展示加载失败的占位图像--否
    src-unset当src不存在时，元素自动设置此属性---

    AI 摘要（LLM Ready）

    • 组件标识：spz-img
    • 用途一句话：替换原生的img图片。
    • 可识别属性条目：8
    • 可识别方法小节：0
    • 可识别事件小节：0
    • 关键属性名（Top）：src、alt、auto-fit、object-fit、object-position、complete
    • 关键方法名（Top）：无（待补充）
    • 关键事件名（Top）：无（待补充）
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/