如何在.NET MAUI动态XAML中加载外部非嵌入图片？

无法在XAML中加载未嵌入应用程序的外部图片。由于XAML文件是在运行时动态加载和解析的，无法通过C#代码绑定方法或事件来加载图片源，必须完全通过XAML实现。

应用启动时会从Web服务器下载最新资源，代码如下：

private static void DownloadResourcesFromWebServer(string url)
{
    try
    {
        string finalPath = Path.Combine(Microsoft.Maui.Storage.FileSystem.AppDataDirectory, "resources_tmp.zip");
        if (File.Exists(finalPath))
        {
              File.Delete(finalPath);
        }

        using HttpClient client = new HttpClient();
        using HttpResponseMessage response = client.GetAsync(url).Result;
        using HttpContent content = response.Content;
        using Stream stream = content.ReadAsStreamAsync().Result;
        using FileStream fs = new FileStream(finalPath, FileMode.OpenOrCreate, FileAccess.Write);

        stream.CopyTo(fs);
        fs.Flush();
        fs.Close();

        ZipFile.ExtractToDirectory(finalPath, Microsoft.Maui.Storage.FileSystem.AppDataDirectory);
    } catch(Exception ex)
    {
        Logger.Log(ex);
        Debugger.Break();
    }
}

所有资源都被解压到Microsoft.Maui.Storage.FileSystem.AppDataDirectory路径下，但无法在XAML中正确指定图片源路径来加载这些图片。是否遗漏了什么配置？或者保存资源的路径选择有误？

尝试了以下几种XAML配置来加载下载的图片，但均未成功：

<Image Source="files/NAME.png" />

<Image Source="NAME.png" />

<Image>
    <Image.Source>
        <FileImageSource File="files/NAME.png"></FileImageSource>
    </Image.Source>
</Image>

以及

<Image>
    <Image.Source>
        <FileImageSource File="NAME.png"></FileImageSource>
    </Image.Source>
</Image>

PS：该项目不是Blazor应用。

解决方案 #

1. 确认文件实际路径
   先打印Microsoft.Maui.Storage.FileSystem.AppDataDirectory的实际值，确认图片是否真的被解压到了目标目录，以及图片的完整路径是否正确。调试时可输出：

   Debug.WriteLine($"AppData路径: {FileSystem.AppDataDirectory}");
   Debug.WriteLine($"图片实际路径: {Path.Combine(FileSystem.AppDataDirectory, "NAME.png")}");
   

   同时检查解压后是否存在路径嵌套问题（比如ZIP包内的文件是否被解压到了子文件夹中）。

2. 使用绝对路径的FileImageSource
   MAUI的FileImageSource默认优先查找应用内置资源目录，对于AppDataDirectory这类外部私有目录，必须使用完整绝对路径。如果XAML是动态生成的，可以在下载完成后替换XAML中的路径占位符：

   string imageAbsPath = Path.Combine(FileSystem.AppDataDirectory, "NAME.png");
   string dynamicXaml = rawXaml.Replace("{ImageAbsolutePath}", imageAbsPath);
   // 加载替换后的XAML内容
   

   也可以直接在XAML中写入绝对路径（跨平台通用）：

   <Image>
       <Image.Source>
           <FileImageSource File="/data/user/0/com.yourapp/files/NAME.png" />
       </Image.Source>
   </Image>
   

3. 尝试UriImageSource替代
   对于本地文件，使用UriImageSource指定file://协议的绝对路径，在动态XAML中兼容性更好：

   <Image>
       <Image.Source>
           <UriImageSource Uri="file:///data/user/0/com.yourapp/files/NAME.png" />
       </Image.Source>
   </Image>
   

   不同平台的file://路径格式：

   • Android：file:///data/user/0/[应用包名]/files/...
   • iOS：file:///var/mobile/Containers/Data/Application/[应用ID]/Documents/...

4. 检查平台权限与解压逻辑

   • Android：确认应用拥有访问私有目录的权限（AppDataDirectory属于应用私有目录，通常无需额外权限，但需确保未被安全策略限制）。
   • 验证ZipFile.ExtractToDirectory的解压结果：如果ZIP包内的图片存放在files/子目录下，实际路径应为AppDataDirectory/files/NAME.png，需对应调整XAML中的路径。

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