# 本地图片目录

> 作者：系统开发团队  
> 日期：2023-05-15  
> 版本：1.0.0

这个目录用于存放本地图片，用于替换远程图片URL。主要用于开发环境中，可以提高开发效率，避免频繁请求远程图片。

## 目录结构

请按照以下结构组织图片：

```
local-images/
  1/  # 对应服务器上的图片ID目录
    image1.jpg
    image2.png
  2/
    image3.jpg
  ...
  custom/  # 自定义目录，用于特殊映射
    special-example.jpg
```

## 使用方法

1. 将远程图片下载到本地
2. 按照原始URL中的ID和文件名组织目录结构
3. 在环境变量中设置 `VITE_USE_LOCAL_IMAGES=true` 启用本地图片映射

## 映射规则

系统支持两种映射方式：

1. **URL前缀替换**：将远程URL中的API基础路径替换为本地路径
2. **特定路径模式匹配**：根据特定的URL模式提取路径信息，构建本地路径
3. **特定映射配置**：在 `src/config/image-mapping.ts` 中配置特定的映射规则

## 示例

### 基本映射

远程URL: `http://localhost:48081/admin-api/infra/file/1/get/example.jpg`  
本地路径: `/local-images/1/example.jpg`

### 特定映射

在 `src/config/image-mapping.ts` 中配置：

```typescript
export const imageMapping: Record<string, string> = {
  'http://localhost:48081/admin-api/infra/file/1/get/example.jpg': '/local-images/custom/special-example.jpg'
}
```

## 注意事项

1. 本地图片映射功能仅在开发环境中启用，生产环境中将使用远程图片
2. 确保本地图片与远程图片保持一致，避免显示差异
3. 定期更新本地图片，与远程图片保持同步