@zhangmmm/ming-ui/src/components/image/index.mdx

基于 react 的组件库

---
name: Image
route: /image
order: 1
sidebar: true
---

import { Playground } from 'docz';
import Image from './';
import "./style/doc.less";

# Image 组件

## 基础用法

<Playground>
  {() => {
    const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
    const src = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"

    return (
      <div className="demo-basic">
        {fits.map((item, index) => (
          <div key={index} className="block">
            <p>{item}</p>
            <Image src={src} fit={item} /> 
          </div>
        ))}
      </div>
    )
  }}
</Playground>

## 占位内容

<Playground>
  {() => {
    const src = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"

    return (
      <div className="demo-placeholder">
        <div className="block">
          <p>默认</p>
          <Image src={src} /> 
        </div>
        <div className="block">
          <p>自定义</p>
          <Image src={src} placeholder={<span>loading...</span>} /> 
        </div>
      </div>
    )
  }}
</Playground>


## 加载失败

<Playground>
  <div className="demo-error">
    <div className="block">
      <p>默认</p>
      <Image /> 
    </div>
    <div className="block">
      <p>自定义</p>
      <Image error={<span>error</span>} /> 
    </div>
  </div>
</Playground>

## 大图预览

<Playground>
  <div className="demo-preview">
    <div className="block">
      <Image
        src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"
        preview
      /> 
    </div>
  </div>
</Playground>

## API

属性 | 说明 | 类型 | 默认值
---|---|---|---
src | 图片源 | string | -
alt | 原生 alt | string | -
fit | 确定图片如何适应容器框，同原生 object-fit | string | fill
preview | 开启图片预览功能 | boolean | false
z-index | 设置图片预览的 z-index | number | 2000