iOS重建后Capacitor.convertFileSrc生成URL无法访问问题

问题根源 #

iOS每次通过Xcode重建应用时，系统会分配新的应用容器UUID，你之前保存的savedFile['uri']是包含旧容器路径的绝对路径，重建后该路径指向已被系统回收的旧容器，导致图片无法访问。而Filesystem.stat使用相对路径+Directory.Data访问的是当前应用容器的正确路径，因此能检测到文件存在。

可行解决方案 #

方案1：动态生成文件访问URL（推荐） #

不要保存文件的绝对URI，只保存相对路径，每次加载时动态获取当前容器的有效URI：

• 保存文件时仅存储相对路径：

const savedFile = await Filesystem.writeFile({
   path: fileName,
   data: this.iconAvatarBase64,
   directory: Directory.Data
});
// 仅保留相对路径，丢弃绝对URI
this.iconAvatarUrlLocalRaw = fileName;

• 加载时动态生成可访问的URL：

async getIconAvatarUrlLocal() {
  // 获取当前容器下文件的最新URI
  const fileStat = await Filesystem.stat({ 
    path: this.iconAvatarUrlLocalRaw, 
    directory: Directory.Data
  });
  return Capacitor.convertFileSrc(fileStat.uri);
}

方案2：监听图片加载错误并重建 #

如果需要保留原有逻辑，可通过图片的error事件触发文件重建：

• 修改模板添加错误监听：

<img slot="start" class="avatar menu" 
     [src]="sanitizer.bypassSecurityTrustUrl(obj.getIconAvatarUrlLocal())"
     (error)="obj.handleAvatarLoadError()">

• 实现错误处理方法：

async handleAvatarLoadError() {
  // 替换为你的原始base64数据获取逻辑
  const avatarBase64 = this.iconAvatarBase64;
  const newFileName = `animalIconAvatar_32_${Math.random()}.svg`;
  
  const savedFile = await Filesystem.writeFile({
    path: newFileName,
    data: avatarBase64,
    directory: Directory.Data
  });
  
  // 更新保存的路径与URI
  this.iconAvatarUrlLocalRaw = newFileName;
  this.iconAvatarUrlLocal = savedFile['uri'];
}

内容的提问来源于stack exchange，提问作者Jonathan Le Cornichone