README.md 1.6 KB

本地图片目录

作者:系统开发团队
日期: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 中配置:

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. 定期更新本地图片,与远程图片保持同步