WPF动态加载Frame页面时运行窗口Image控件图片不显示

手动创建Frame后直接给Content属性赋值Page实例的用法，不符合Frame控件的导航设计逻辑，运行时不会为该Page实例设置正确的相对资源URI解析基准：

• 设计时视图能正常显示图片，是因为设计器默认以Page所在项目的根目录为路径基准解析相对路径
• 运行时直接赋值Content的场景下，Page内的相对路径会以应用当前执行上下文为基准解析，无法定位到Assets目录下的图片文件，因此Image控件渲染空白
• TextBlock文本不涉及外部资源加载，因此不受路径解析问题影响可以正常显示
• 全局BitmapImage资源加载失败也是相同原因：仅写文件名的相对UriSource没有明确资源位置，运行时路径解析失败。

你可以任选以下一种方案修复：

• 方案1：使用Frame原生的Navigate方法加载Page，替代直接给Content赋值
  这是官方推荐的Frame用法，Navigate方法会自动为目标Page配置正确的资源解析上下文，原有相对路径的图片可以正常加载。修改后台代码如下：

  private void createNewRaid_Click(object sender, RoutedEventArgs e)  
  {
      Frame RaidFrame = new Frame();
      // 调用Navigate方法导航到目标Page
      RaidFrame.Navigate(typeof(Raid));
      RaidPanel.Children.Add(RaidFrame);
  }
  

  代码修改完成后，只要图片文件的生成属性配置正确，原有XAML中Source="/Assets/Maps/Img100.png"的写法即可正常工作。

• 方案2：如果业务场景必须直接给Frame的Content赋值，将所有图片资源路径改为绝对格式，绕开相对路径解析逻辑
  根据你的项目类型选择对应绝对URI写法：

  • WPF项目使用Pack URI格式：

    <!-- Image控件直接引用 -->
    <Image Grid.Column="1" Grid.Row="2" Height="80" Source="pack://application:,,,/Assets/Maps/Img100.png" />
    
    <!-- 全局资源定义 -->
    <Application.Resources>
        <BitmapImage x:Key="myImage" UriSource="pack://application:,,,/Assets/Maps/Img100.png" />
    </Application.Resources>
    

  • UWP/WinUI项目使用ms-appx协议格式：

    <!-- Image控件直接引用 -->
    <Image Grid.Column="1" Grid.Row="2" Height="80" Source="ms-appx:///Assets/Maps/Img100.png" />
    
    <!-- 全局资源定义 -->
    <Application.Resources>
        <BitmapImage x:Key="myImage" UriSource="ms-appx:///Assets/Maps/Img100.png" />
    </Application.Resources>
    

• 前置检查项：确认图片文件的属性配置
  在解决方案资源管理器中右键点击Img100.png文件，打开属性面板确认配置：

  • WPF项目：生成操作设置为Resource，若设置为Content则需要将复制到输出目录设置为如果较新则复制
  • UWP/WinUI项目：生成操作设置为内容

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