test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-15 01:11:26 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity
8ebb7be7b0
ant-design/components/image/index.en-US.md
GUAN MING 32cca6e5a8
feat: migrate less to token for Image (#42048) 
* feat: migrate less to token for Image

* docs: update migrate-less-variables.en-US.md

* docs: update migrate-less-variables.zh-CN.md

* docs: fix error

* docs: fix typo

* docs: remove Chinese in English docs

* feat: migrate less to token for Image

* docs: update migrate-less-variables.en-US.md

* docs: remove Chinese in English docs

* docs: fix typo

* docs: fix docs error

* feat: add demo

* docs: Update docs/react/migrate-less-variables.zh-CN.md

Co-authored-by: MadCcc <1075746765@qq.com>

* fix: remove token

* docs: Update docs/react/migrate-less-variables.en-US.md

* fix: correct token name

* fix: demo token name

* docs: update global token in docs

* docs: update

* chore: fix lint

---------

Co-authored-by: MadCcc <1075746765@qq.com>
2023-06-02 15:48:18 +08:00

2.7 KiB
Raw Blame History

category group title cols cover coverDark
Components Data Display Image 2 https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original

Previewable image.

When To Use

  • When you need to display pictures.
  • Display when loading a large image or fault tolerant handling when loading fail.

Examples

Basic Usage Fault tolerant Progressive Loading Multiple image preview Preview from one image Custom preview image Controlled Preview Custom preview mask Top progress customization when previewing multiple images Custom component token

API

Property Description Type Default Version
alt Image description string - 4.6.0
fallback Load failure fault-tolerant src string - 4.6.0
height Image height string | number - 4.6.0
placeholder Load placeholder, use default placeholder when set true ReactNode - 4.6.0
preview preview config, disabled when false boolean | previewType true 4.6.0 previewType:4.7.0
src Image path string - 4.6.0
width Image width string | number - 4.6.0
onError Load failed callback (event: Event) => void - 4.12.0
rootClassName add custom className for image root DOM and preview mode root DOM string - 4.20.0

previewType

{
  visible?: boolean;
  onVisibleChange?: (visible, prevVisible, current: number) => void; // `current` only support after v5.3.0
  getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0
  src?: string; // v4.10.0
  mask?: ReactNode; // v4.9.0
  maskClassName?: string; // v4.11.0
  rootClassName?: string; // only support after v5.4.0
  current?: number; // v4.12.0 Only support PreviewGroup
  countRender?: (current: number, total: number) => string  // v4.20.0 Only support PreviewGroup
  scaleStep?: number;
  onChange?: (current: number, prevCurrent: number) => void; // only support after v5.3.0
}

Other attributes <img>

Design Token