ImageComparison 图片对比组件使用指南

本文介绍如何在博客中使用 ImageComparison 组件创建图片对比效果。

基础用法

彩色

黑白

图像处理对比

清晰

模糊

使用方式

import { ImageComparison } from '@/components/mdx';

<ImageComparison
  beforeSrc="/images/before.jpg"
  afterSrc="/images/after.jpg"
  beforeLabel="处理前"
  afterLabel="处理后"
/>

参数说明

参数	类型	默认值	说明
beforeSrc	string	必填	对比前图片 URL
afterSrc	string	必填	对比后图片 URL
beforeLabel	string	”Before”	对比前标签
afterLabel	string	”After”	对比后标签

交互说明

• 拖动分隔线：左右拖动中间的分隔线查看对比效果
• 标签显示：左右两侧分别显示对比前后的标签