react-native for windows UWP - 如何加载本地光栅图像资源

Question

I am using react-native for windows UWP. I don't understand how to load local raster image assets I want to package with the application. I am currently placing my image files in windows/foobar/Assets/ (where foobar is the name of the application). My initial assumption was that I could simply require them in the source like this:

<Image style={{ width: 50, height: 50}} uri={require('./windows/foobar/Assets/energy.png')} />

This works for svg files but errors for raster files saying it was unable to define the module. That makes sense since require is for loading modules and raster files are definitely not that. VS Code tries to help me understand this by not auto completing any raster files under Assets/.

However I've seen some examples online state I can do:

source={require('@expo/snack-static/react-native-logo.png')}

I don't understand why this format could work but the local path would fail.

I've seen other examples stating I should use:

uri={require('ms-appx:///ReactAssets/energy.png')}

But this does not resolve.

Ultimately I assume I need to tell react-native for windows about the assets I want to include in my app so they can be resolved through some kind of resource bundle, but I'm not finding any documentation on how to accomplish this. What do I do?

Answer 1

The discussion on this github issue is a little confusing to follow but eventually got me to the right answer.

1. Put your image under windows\\{yourprojectname}\Image
2. Open the windows solution in Visual Studio at windows\\{yourprojectname}.sln
3. In solution explorer, at the top, click on 'show all files'.
4. Expand the project for your Universal Windows app, find the Images folder, right click your image file and select 'Include in project'. Save all files.
5. Restart react-native

You can now refer to your images with:
<Image source={{ uri: "ms-appx:///Image/yourimage.png"}}/>