.NET MAUI应用中ImageSource绑定失效问题求助

针对你遇到的FilePicker选图后图片不显示的问题，从代码逻辑和平台特性出发，给出以下排查方向：

1. 流的重复读取导致位置异常 #

你的代码中同一个流被先后用于创建ImageSource和读取Base64字节，流是单向读取的，第一次被Image控件加载消费后，流的位置会移动到末尾，后续读取会得到空数据，甚至直接导致Image无法正确加载。

解决方法：将文件流复制到MemoryStream，重置位置后分别使用：

[RelayCommand]
async Task PickImage()
{
    var file = await FilePicker.PickAsync(new PickOptions
    {
        PickerTitle = "Choose Product Image",
        FileTypes = FilePickerFileType.Images
    });

    if (file == null)
        return;

    // 将文件流复制到内存流，避免位置冲突
    using var fileStream = await file.OpenReadAsync();
    var memoryStream = new MemoryStream();
    await fileStream.CopyToAsync(memoryStream);

    // 设置ImageSource时，每次获取流都重置位置
    StoreIcon = ImageSource.FromStream(() =>
    {
        memoryStream.Position = 0;
        return memoryStream;
    });

    // 读取Base64前重置流位置
    memoryStream.Position = 0;
    byte[] imageBytes = FileHelper.ReadFully(memoryStream);
    Store.IconB64Image = Convert.ToBase64String(imageBytes);

    // 获取扩展名的更简洁方式
    Store.IconMimeType = Path.GetExtension(file.FullPath);
}

2. 绑定与类型匹配问题 #

• 检查ViewModel是否正确设置为页面的BindingContext，确保绑定关系生效。
• 若使用CommunityToolkit.Mvvm，[ObservableProperty]生成的属性是驼峰命名的StoreIcon，要与XAML中的绑定路径一致；且不要用string类型存储ImageSource，需保持ImageSource类型：

  [ObservableProperty]
  private ImageSource _storeIcon;
  

• 去掉Image绑定的Mode=TwoWay，Image控件不会修改源数据，OneWay或默认模式足够：

  Source="{Binding StoreIcon}"
  

3. 平台权限配置 #

确保各平台的文件访问权限已正确配置：

• Android：在AndroidManifest.xml中添加（针对Android 12及以下版本）：

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  

  Android 13+ 无需额外配置，FilePicker会自动处理权限。
• iOS：在Info.plist中添加相册访问描述：

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册选择图片</string>
  

4. 验证Image控件可见性 #

暂时修改Image控件的背景色，确认控件本身在界面上存在：

<Image HorizontalOptions="Center"
       VerticalOptions="Center"
       Aspect="AspectFill"
       HeightRequest="80"
       Source="{Binding StoreIcon}"
       WidthRequest="80"
       BackgroundColor="Red">
</Image>

如果红色背景可见，说明问题出在ImageSource的创建；如果背景不可见，检查布局是否正确（比如Grid的Row/Column设置、Border是否遮挡了Image）。

5. 调试验证ImageSource有效性 #

在设置StoreIcon后，添加调试代码确认ImageSource是否有效：

var testSource = ImageSource.FromStream(() => 
{
    memoryStream.Position = 0;
    return memoryStream;
});
StoreIcon = testSource;
// 调试时查看testSource是否不为null，手动验证流是否能读取到有效数据

内容的提问来源于stack exchange，提问作者Kevin Deery