针对 HTML 内容使用 Ant Design 图片弹框

该文章使用 ChatGPT 优化内容

在图文混排的场景中，我们可以使用 Ant Design 的 Image 组件来支持图片点击弹窗，并且可以根据需要选择图片大小。在设置缩略图的宽度和高度时，我们可以选择较小的值以保证文字阅读体验。当需要查看某张图片的具体内容时，只需点击图片即可放大查看细节。但是需要注意的是，Ant Design 的 Image 组件只适用于 React 内容，当后端返回了一份图文混排的 HTML 字符串时，则需要另寻他法。在这种场景中，我们可以通过正则表达式来提取 HTML 字符串中的 <img /> 标签，并为其附加特殊的 data-type字段来标记其为 image，即：<img data-type="image" src="..." />。

为了在 React 组件中使用 Ant Design 的 Image 组件，可以使用 useImage() Hook，该 Hook 会监听所有的点击事件。当点击了符合约定的对象（即 data-type="image"）时，会使用 Ant Design 的 Message 组件弹出一个提示，提示内容即为激活的 Image 组件。当点击遮罩层时，会触发 Message 的销毁。

需要注意以下几点：

• 使用 Dialog 创建和销毁时机不太合适，Message 更合适；
• 弹窗时左上角会有一个小正方形（Message 的动画），可以考虑通过 CSS 将其设为透明，以提升用户体验。

下面是代码示例：

// @ts-check
import React from 'react';
import { Image, message } from 'antd';

export const DATA_TYPE_KEY = 'image';

/**
 * 支持 html 化的 img 标签弹窗
 *
 * 需要标签包含 `data-type="${DATA_TYPE_KEY}"`
 * <img data-type=`${DATA_TYPE_KEY}` />
 */
export function useImage() {
  React.useEffect(() => {
    const onClick = (e) => {
      if (e.target.tagName === 'IMG' && e.target.dataset.type === DATA_TYPE_KEY) {
        message.info({
          key: DATA_TYPE_KEY,
          style: { opacity: 0, width: 0, height: 0, overflow: 'hidden' },
          duration: 0,
          content: (
            <Image
              src={e.target.src}
              preview={{
                visible: true,
                onVisibleChange: () => message.destroy(DATA_TYPE_KEY),
              }}
            />
          ),
        });
      }
    };
    document.addEventListener('click', onClick);

    return () => {
      document.removeEventListener('click', onClick);
    };
  }, []);
}