HarmonyOS 鸿蒙Next中为什么从相册选择的照片用IMAGE预览是空白的

从相册 / 拍照获取的file://开头 URI（如file://media/...），指向系统媒体库或公共存储文件，应用默认无直接读取权限，Image 组件无法加载无权限的外部文件，因此显示空白。

✅ 两种解决方案（附带可直接使用的代码）

方案 1：复制到应用沙箱后加载（权限可控，推荐）

将图片文件复制到应用私有沙箱目录，再用沙箱路径给 Image 组件加载。

typescript

运行

import fs from '@ohos.file.fs';
import common from '@ohos.app.ability.common';

@State sandboxImagePath: string = ''; // 沙箱内图片路径

@Builder popoverContent() {
  Stack({ alignContent: Alignment.Top }) {
    Column() {
      // 用沙箱路径加载图片
      Image(this.sandboxImagePath)
        .width(100)
        .height(100)
        .objectFit(ImageFit.Contain)
    }
    Column() {
      IBestIcon({ name: 'cross' })
    }
  }
}

// 复制图片到沙箱的方法（在获取到图片URI后调用）
async copyImageToSandbox(uri: string): Promise<void> {
  const context = getContext(this) as common.UIAbilityContext;
  const sandboxDir = context.filesDir; // 应用沙箱files目录
  const fileName = `temp_${Date.now()}.jpg`;
  const sandboxPath = `${sandboxDir}/${fileName}`;

  try {
    // 打开源文件（相册/拍照的URI）
    const srcFile = fs.openSync(uri, fs.OpenMode.READ_ONLY);
    // 创建目标文件（沙箱内）
    const destFile = fs.openSync(sandboxPath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    
    // 复制文件内容
    await fs.copyFile(srcFile.fd, destFile.fd);
    
    // 关闭文件流
    fs.closeSync(srcFile);
    fs.closeSync(destFile);

    // 转换为Image可识别的沙箱URI格式
    this.sandboxImagePath = `file://${sandboxPath}`;
  } catch (err) {
    console.error('复制文件失败:', JSON.stringify(err));
  }
}

// 使用示例：photoPicker回调中调用
// photoPicker.selectPhotos().then(photoInfo => {
//   this.copyImageToSandbox(photoInfo[0].uri);
// });

方案 2：用PixelMap直接加载（无需复制文件）

通过ImageSource将文件 URI 转为PixelMap，再赋值给 Image 组件的pixelMap属性，无需复制文件。

typescript

运行

import image from '@ohos.multimedia.image';
import common from '@ohos.app.ability.common';

@State previewPixelMap: image.PixelMap | null = null;

@Builder popoverContent() {
  Stack({ alignContent: Alignment.Top }) {
    Column() {
      // 用pixelMap属性加载图片
      Image()
        .pixelMap(this.previewPixelMap)
        .width(100)
        .height(100)
        .objectFit(ImageFit.Contain)
    }
    Column() {
      IBestIcon({ name: 'cross' })
    }
  }
}

// 加载图片为PixelMap的方法（在获取到图片URI后调用）
async loadImageToPixelMap(uri: string): Promise<void> {
  try {
    // 1. 创建ImageSource
    const imageSource = image.createImageSource(uri);
    // 2. 配置解码选项（可按需缩小图片，优化性能）
    const decodingOptions: image.DecodingOptions = {
      desiredSize: { width: 100, height: 100 }
    };
    // 3. 生成PixelMap
    this.previewPixelMap = await imageSource.createPixelMap(decodingOptions);
    // 4. 释放ImageSource资源
    imageSource.release();
  } catch (err) {
    console.error('加载图片失败:', JSON.stringify(err));
  }
}

// 页面销毁时释放PixelMap（避免内存泄漏）
aboutToDisappear() {
  if (this.previewPixelMap) {
    this.previewPixelMap.release();
    this.previewPixelMap = null;
  }
}

// 使用示例：拍照/相册回调中调用
// this.loadImageToPixelMap(this.selectImage);

📌 关键说明

1. 权限：HarmonyOS 5 中photoPicker/camera为安全控件，默认无需额外权限，image.createImageSource会自动处理临时读取权限。
2. 路径格式：
   • 沙箱路径需拼接为file:///data/storage/el2/...格式（context.filesDir返回的路径以/开头，直接拼接file://即可）。
   • PixelMap方式直接传入相册 / 拍照返回的uri即可，无需格式转换。
3. 性能优化：PixelMap方式建议设置desiredSize缩小图片，避免加载大图片导致卡顿。

📚 官方文档参考

• Image 组件 API