markdown 里面图片转换后如何 能支持点击放大

[Luckingyl]

markdown 里面图片转换后如何 能支持点击放大

[GuoDapeng]

我使用 antd 的组件完成这件事。

/**
 * inline: true
 */
import React from 'react';
import {Image} from 'antd';

const App: React.FC = () => (
  <Image width={600} src="/docker/1.png"/>
);

export default App;

在 src/components/CenterImagePreviewGroup.tsx 位置创建文件。内容：

import React from 'react';
import {Image} from 'antd';

interface CenterImagePreviewGroupDataProps {
  src: string,
  width?: string | number
}

interface CenterImagePreviewGroupProps {
  data: CenterImagePreviewGroupDataProps[];
  alt?: string;
  width?: number;
}

const CenterImagePreviewGroup: React.FC<CenterImagePreviewGroupProps> = ({data, alt = '', width = '100%'}) => (
  <Image.PreviewGroup>
    {data.map((it: CenterImagePreviewGroupDataProps) =>
      <div style={{display: 'flex', justifyContent: 'center'}}>
        <Image
          width={it.width || width}
          src={it.src}
          alt={alt}
        />
      </div>
    )}
  </Image.PreviewGroup>
);

export default CenterImagePreviewGroup;

在文档里面如下方式使用，可以搞成相册一样的效果。

/**
 * inline: true
 */
import CenterImagePreviewGroup from '@/components/CenterImagePreviewGroup.tsx';

export default () => (
  <CenterImagePreviewGroup
    data={[
      { src: '/linux/034b53d716065d6077013c0b1ce31e15.jpg' },
      { src: '/linux/9d278ef80ccc827aaab31e6634f2c558.jpg' },
      { src: '/linux/c8d0b3d3933134ac6949b84786aa26c6.jpg' },
      { src: '/linux/12aea8fa2ba7265240ce1c339021d9be.png' },
    ]}
  />
);

这里的图片效果可以参考一下