View Shadcn UI

Appearance

介绍 ​


本文介绍了 ShadcnImage 组件的功能和用法。

用法 ​

显示代码
vue
<template>
  <ShadcnImage src="https://picsum.photos/800/400" />
</template>

提示 (alt) ​

显示代码
vue
<template>
  <ShadcnImage src="https://picsum.photos/800/400" alt="View Shadcn UI" />
</template>

宽度 (width) ​

显示代码
vue
<template>
  <ShadcnImage src="https://picsum.photos/800/400" width="300" />
</template>

高度 (height) ​

显示代码
vue
<template>
  <ShadcnImage src="https://picsum.photos/800/400" height="300" />
</template>

填充方式 (fit) ​

显示代码
vue
<template>
  <ShadcnImage src="https://picsum.photos/800/400" alt="View Shadcn UI" fit="cover"/>
  <ShadcnImage src="https://picsum.photos/800/400" alt="View Shadcn UI" fit="contain"/>
  <ShadcnImage src="https://picsum.photos/800/400" alt="View Shadcn UI" fit="fill"/>
  <ShadcnImage src="https://picsum.photos/800/400" alt="View Shadcn UI" fit="none"/>
  <ShadcnImage src="https://picsum.photos/800/400" alt="View Shadcn UI" fit="scale-down"/>
</template>

懒加载 (lazy) ​

显示代码
vue
<template>
  <ShadcnImage src="https://picsum.photos/800/400" alt="View Shadcn UI" />
  <ShadcnImage src="https://picsum.photos/800/400" alt="View Shadcn UI" lazy />
</template>

边框 (border) ​

显示代码
vue
<template>
  <ShadcnImage src="https://picsum.photos/800/400" alt="View Shadcn UI" border />
</template>

图片组 (group) ​

显示代码
vue
<template>
  <ShadcnImageGroup :images="images" :columns="8" :gap="4" preview/>
</template>

图片 (Image) 属性 ​

图片组 (Image Group) 属性 ​

图片预览 (Image Preview) 属性 ​

图片 (Image) 事件 ​

图片 (Image) 插槽 ​