Unable to load bundled asset images using `file://` uri in Fabric

[jonthysell]

Problem Description

In the new Fabric template, bundles are loaded off disk by specifying a file:// path for the bundle root path, i.e.

host.InstanceSettings().BundleRootPath(std::wstring(L"file://").append(appDirectory).append(L"\\Bundle\\").c_str());

which resolves to something like file://C:\code\testcanary\windows\testcanary.Package\bin\x64\Debug\AppX\testcanary\Bundle\

This is what is necessary to load the bundle from disk correctly (see PR #12754).

However, when trying to load an image asset as placed by the bundler, (say, the logo.png in a new app) the following string is passed as the full Uri to be loaded:

file://C:\code\testcanary\windows\testcanary.Package\bin\x64\Debug\AppX\testcanary\Bundle\assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png

This makes its way into ImageUtils.cpp's GetImageStreamAsync(), which attempts to extract the correct path (i.e. remove file:// and fix the forward slashes), the path ultimately gets resolved to:

\C:\code\testcanary\windows\testcanary.Package\bin\x64\Debug\AppX\testcanary\Bundle\assets\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png

For some reason the Uri.Path property includes a single / at the beginning (which gets converted to \ in our code). That path causes the image load to fail.

Steps To Reproduce

1. Create a new cpp-app fabric app
2. Specify <UseBundle>true</UseBundle> in experimental features
3. Run app.

Expected Results

Logo image loads correctly.

CLI version

13.0.0

Environment

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22631
  CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Memory: 2.23 GB / 15.84 GB
Binaries:
  Node:
    version: 18.16.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.5.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.9.34607.119 (Visual Studio Enterprise 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.0-nightly-20240115-0c7008f28
    wanted: 0.74.0-nightly-20240115-0c7008f28
  react-native-windows:
    installed: 0.0.0-canary.774
    wanted: ^0.0.0-canary.774
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

DebugBundle

Snack, code example, screenshot, or link to a repository