Ant Design 的 `Image` 组件，通过 `preview.src` 加载本地图片文件

在 Ant Design 的 Image 组件中，通过 preview.src 加载本地图片文件，主要有以下几种实现方式（以 React + Ant Design 为例）：

---

方法 1：直接导入图片（推荐）

import { Image } from 'antd';
import localImage from './assets/local-image.png'; // 导入本地图片function ImagePreview() {return (<Imagesrc={localImage} // 显示用的图片（缩略图）preview={{src: localImage, // 预览时加载的本地原图mask: '点击查看高清图'}}/>);
}

关键点：

• 使用 ES6 import 导入图片（需确保图片路径正确）
• Webpack/Vite 会自动处理图片路径（需确保项目配置支持图片加载）

---

方法 2：使用 require（适用于非模块化环境）

<Imagepreview={{src: require('./assets/local-image.png') // 通过 require 加载}}
/>

注意：现代项目（如 Create React App/Vite）通常不建议直接使用 require。

---

方法 3：动态切换本地图片

import { Image, Button } from 'antd';
import img1 from './assets/image1.png';
import img2 from './assets/image2.png';function DynamicPreview() {const [previewSrc, setPreviewSrc] = useState(img1);return (<div><Imagesrc={img1}preview={{ src: previewSrc }}/><Button onClick={() => setPreviewSrc(img2)}>切换预览图片</Button></div>);
}

---

方法 4：从 public 目录引用

// 假设图片放在 public/images 目录下
<Imagepreview={{src: '/images/local-image.png' // 直接引用 public 目录中的文件}}
/>

适用场景：需要绕过构建工具直接引用静态文件时。

---

完整示例（TypeScript）

import { Image } from 'antd';
import thumbnail from './assets/thumbnail.png';
import fullImage from './assets/full-image.png';function LocalImagePreview() {return (<Imagesrc={thumbnail} preview={{src: fullImage, // 预览高清原图maskClassName: 'custom-mask',toolbarRender: (_, { actions }) => (<div style={{ display: 'flex', gap: 8 }}>{actions.zoomIn}{actions.zoomOut}{actions.rotateRight}</div>)}}/>);
}

---

配置说明

1. 项目结构（推荐）：

   src/assets/images/thumbnail.png  # 缩略图fullsize.png   # 高清预览图
   

2. 构建工具配置：

   • Webpack：需配置 file-loader 或 asset/resource
   • Vite：默认支持图片导入

3. 样式优化：

   /* 自定义预览遮罩样式 */
   .custom-mask {background: rgba(0, 0, 0, 0.5);border-radius: 4px;
   }
   

---

常见问题解决

问题1：图片加载失败？

• 检查路径是否正确（开发者工具 Network 面板查看请求）
• 确保图片文件存在于指定路径

问题2：图片未更新？

• 修改 key 强制重新渲染：

  <Image key={previewSrc} preview={{ src: previewSrc }}
  />
  

问题3：TypeScript 类型报错？

• 声明图片模块类型（在 src/global.d.ts 中）：

  declare module '*.png' {const value: string;export default value;
  }
  

---

通过以上方法，可以灵活地在 Ant Design 的 Image 组件中加载本地图片作为预览源，并根据需求动态控制预览行为。