hanye-website/README-image-localization.md

API图片本地化功能

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

功能概述

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

使用方法

基本使用

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

npm run generate:localize

这个命令会：

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

只处理图片

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

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