图片组件

用于展示之家图片，支持裁切、webp 优化、懒加载、识别设备的高清图等功能。

代码演示

import { ImgShow } from '../../components';

function Card({ confData }) {
  const imgM = [
    {
      url: 'https://img3.autoimg.cn/soudfs/g24/M05/1F/37/autohomecar__Chxky2VM1hOAQHdjAAHtIgXaSCY270.png',
      width: 375,
      height: 145,
    },
  ];

  return <ImgShow imgList={imgM} dataRule="375x0_q60_" />;
}

API

参数	类型	说明	默认值
className	string	容器类名	-
imgList	TImg[]	图片列表	-
imgUrl	string	图片地址 (推荐使用imgList)	-
dataRule	string	之家图片裁切规则	-
lazy	boolean	是否开启懒加载	true
placeholder	boolean	懒加载是否显示占位图	true
width	number	图片宽度	-
height	number	图片高度	-
onClick	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void	点击图片回调	-

TImg 类型定义

type TImg = {
  url: string;
  uid?: string;
  name?: string;
  status?: 'done' | 'uploading' | 'error';
  width?: number;
  height?: number;
};

FAQ

参数 imgList 与 imgUrl 有什么区别？

推荐使用 imgList，UploadImg 传图组件生成的数据结构可以直接适配 imgList, 由于历史卡片数据字段设计的原因，有些卡片的图片数据存的是单字段，当组件参数同时存在 imgList 与 imgUrl 时，组件会优先使用 imgList 字段。