antd image组件自定义遮罩层按钮

antd的Image组件可以通过设置mask属性来添加遮罩层，也可以通过设置placeholder属性来设置图片加载时的占位符。如果需要在遮罩层上添加按钮，可以在遮罩层的子元素中添加Button组件。

以下是一个示例代码：

import { Image, Button } from 'antd';

const MyImage = () => {
  return (
    <Image
      width={200}
      src="https://picsum.photos/id/237/200/300"
      placeholder={
        <div>
          <Button type="primary">点击加载</Button>
        </div>
      }
      mask={
        <div style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <Button type="primary">查看大图</Button>
        </div>
      }
    />
  );
};

export default MyImage;

在上面的代码中，我们设置了Image组件的宽度为200，图片地址为https://picsum.photos/id/237/200/300。同时，我们在placeholder属性中设置了一个按钮，用于在图片加载时显示。在mask属性中，我们设置了一个半透明的遮罩层，并在其中添加了一个按钮，用于查看大图