图片展示小图点击展示大图

@aligov/components-img-thumb

图片展示小图，点击展示大图

用法

import ImgThumb from '@aligov/components-img-thumb';

<ImgThumb src={imgSrc} />

API

参数名 说明 必填 类型 默认值 备注
src 图片地址 Y string
alt 图片 alt 信息 string
width 缩略图宽度 css width 有效值或数字（等同于px） 30px
height 缩略图高度 css height 有效值或数字（等同于px） 30px
trigger 自定义触发器而不是缩略图 React 元素

DEMO 列表

简单使用

`

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
import ImgThumb from '@aligov/components-img-thumb';

class App extends Component {
  render() {
    return (
      <table>
        <tbody>
        <tr>
          <td>小尺寸</td>
          <td>
            <ImgThumb src="https://img.alicdn.com/tfs/TB1fZnqfKH2gK0jSZFEXXcqMpXa-104-95.jpg" />
          </td>
        </tr>
        <tr>
          <td>大尺寸</td>
          <td>
            <ImgThumb src="https://cn.bing.com/th?id=OHR.SaltireClouds_ZH-CN0002027700_1920x1080.jpg&rf=LaDigue_1920x1080.jpg" />
          </td>
        </tr>
        <tr>
          <td>自定义缩略图尺寸</td>
          <td>
            <ImgThumb width={100} height={100} src="https://cn.bing.com/th?id=OHR.SaltireClouds_ZH-CN0002027700_1920x1080.jpg&rf=LaDigue_1920x1080.jpg" />
          </td>
        </tr>
        <tr>
          <td>自定义缩略图尺寸（保持比例）</td>
          <td>
            <ImgThumb width={100} src="https://cn.bing.com/th?id=OHR.SaltireClouds_ZH-CN0002027700_1920x1080.jpg&rf=LaDigue_1920x1080.jpg" />
          </td>
        </tr>
        <tr>
          <td>自定义触发元素</td>
          <td>
            <ImgThumb src="https://cn.bing.com/th?id=OHR.SaltireClouds_ZH-CN0002027700_1920x1080.jpg&rf=LaDigue_1920x1080.jpg" trigger={<Button>查看图片</Button>} />
          </td>
        </tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);
table { border-collapse: collapse; }
table td {
  border: 1px solid #ccc;
  padding: 10px;
}