hanye-website/README-image-localization.md

# API图片本地化功能

此功能用于将API返回的远程图片链接下载到本地并替换成本地路径，方便生成的静态站点完全脱离原始服务器。

## 功能概述

1. 在Nuxt静态站点生成完成后，处理所有API响应JSON文件
2. 自动识别数据中的图片URL字段并下载图片到本地
3. 替换JSON数据中的远程URL为本地路径
4. 确保静态生成的网站能完全离线运行，所有图片资源都在本地

## 使用方法

### 基本使用

直接使用以下命令生成静态站点并本地化图片：

```bash
npm run generate:localize
```

这个命令会：
1. 运行标准的`nuxt generate`生成静态站点
2. 运行图片本地化脚本处理API数据中的图片URL

### 只处理图片

如果你已经生成了静态站点，只需要处理图片：

```bash
npm run localize-images
```

## 自定义配置

### 支持的图片字段

默认情况下，系统会查找以下字段名称中的图片URL：
- image
- imageUrl
- thumbnail
- cover
- avatar
- photo
- src

如需自定义，可以在`scripts/localize-images.mjs`中修改`localizeImages`函数的默认参数。

### 图片保存位置

默认情况下，下载的图片会保存到`public/images/remote`目录，网站访问路径为`/images/remote/[图片文件名]`。

## 工作原理

1. Nuxt先正常执行静态生成过程，将API数据缓存到`.output/server/api`目录下
2. 脚本`scripts/localize-images.mjs`在生成完成后执行，扫描并处理缓存的JSON文件
3. 识别并下载所有图片到`public/images/remote`目录
4. 更新JSON响应文件，将远程图片URL替换为本地路径

## 注意事项

1. 此方法不需要修改源代码，完全在构建后处理
2. 下载的图片使用URL的MD5哈希作为文件名，确保相同URL的图片只下载一次
3. 如果图片下载失败，会保留原始URL，不会破坏网站功能
4. 图片本地化过程会在控制台输出详细日志

## 常见问题

### 生成后图片仍然是远程链接

检查以下几点：
1. 确认使用了`npm run generate:localize`而不是`npm run generate`
2. 检查控制台输出中是否有错误信息
3. 检查`public/images/remote`目录是否已创建并包含图片

### 图片下载失败

可能的原因：
1. 网络问题，无法访问原始图片URL
2. 原始URL返回错误，如404或403
3. 目标目录没有写入权限

解决方法：
1. 检查网络连接和图片URL是否可访问
2. 确保目标目录有写入权限
3. 手动修复失败的图片URL