---
title: WKImage 图片
group:
  title: 基础组件
  path: /base/
---

## 何时使用

优化版的 image 标签，提供三种图片展示裁剪模式，支持图片自适应宽高、点击预览、自定义点击事件等功能。

- 在 组件库 中，我们将定义了三种图片展示裁剪模式。
  - cover：等同于 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
  - contain：等同于 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
  - scale：等同于 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。

## 基础使用

```tsx
/**
 * title: 基础使用
 * desc: 基础使用
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKImage } from '@wakeapp/components';
import wkStar from './wk-star.png';

export default () => {
  return (
    <PageWrapper title="基础使用">
      <WKImage src={wkStar} style={{ width: '100%', padding: '8px' }}></WKImage>
    </PageWrapper>
  );
};
```

## 固定宽高

```tsx
/**
 * title: 固定宽高
 * desc: 固定宽高
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKImage } from '@wakeapp/components';
import wkStar from './wk-star.png';

export default () => {
  return (
    <PageWrapper title="固定宽高">
      <WKImage src={wkStar} width={200} height={100} style={{ width: '100%', padding: '8px' }}></WKImage>
    </PageWrapper>
  );
};
```

## 自适应宽度

```tsx
/**
 * title: 自适应宽度
 * desc: 自适应宽度
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKImage, View } from '@wakeapp/components';
import wkStar from './wk-star.png';

export default () => {
  return (
    <PageWrapper title="自适应宽度">
      <View style={{ width: '100%', padding: '8px' }}>
        <WKImage src={wkStar} widthAuto height={100}></WKImage>
        <View style={{ width: '100%', height: 200, border: '1px solid black', marginTop: '20px' }} className="mt-sm">
          <WKImage src={wkStar} widthAuto height="30%"></WKImage>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 自适应高度

```tsx
/**
 * title: 自适应高度
 * desc: 自适应高度
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKImage, View } from '@wakeapp/components';
import wkStar from './wk-star.png';

export default () => {
  return (
    <PageWrapper title="自适应高度">
      <View style={{ width: '100%', padding: '8px' }}>
        <WKImage src={wkStar} width={200} heightAuto></WKImage>
        <View style={{ width: '100%', height: 200, border: '1px solid black', marginTop: '20px' }} className="mt-sm">
          <WKImage src={wkStar} width="50%" heightAuto></WKImage>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 不同裁剪模式

```tsx
/**
 * title: 不同裁剪模式
 * desc: 不同裁剪模式
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKImage, View } from '@wakeapp/components';
import wkStar from './wk-star.png';

export default () => {
  return (
    <PageWrapper title="不同裁剪模式">
      <View style={{ width: '100%', padding: '8px' }}>
        <WKImage src={wkStar} width={60} height={60} mode="cover"></WKImage>
        <WKImage src={wkStar} width={60} height={60} mode="contain" style={{ marginLeft: '20px' }}></WKImage>
        <WKImage src={wkStar} width={60} height={60} mode="scale" style={{ marginLeft: '20px' }}></WKImage>
      </View>
    </PageWrapper>
  );
};
```

## 支持点击预览

```tsx
/**
 * title: 支持点击预览
 * desc: 支持点击预览
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKImage, WKPreviewContext, View } from '@wakeapp/components';
const img1 = 'https://img.yzcdn.cn/vant/leaf.jpg';
const img2 = 'https://img.yzcdn.cn/vant/tree.jpg';
const img3 = 'https://img.yzcdn.cn/vant/sand.jpg';

export default () => {
  return (
    <PageWrapper title="支持点击预览">
      <WKPreviewContext>
        <View style={{ width: '100%', padding: '8px' }}>
          <WKImage src={img1} width="100%" heightAuto previewable></WKImage>
          <WKImage src={img2} width="100%" heightAuto previewable></WKImage>
          <WKImage src={img3} width="100%" heightAuto previewable></WKImage>
        </View>
      </WKPreviewContext>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKImage/index.d.ts'></API>
