Cannot load local images in 0.63.4 in iOS simulator

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

After adding image to source tree, when using code like <Image source={ require('./path_to_image.png') } /> the image is not rendered and no error is shown. If I use a URI or icon, it renders.

React Native version:

Run react-native info in your terminal and copy the results here. System: OS: macOS 11.1 CPU: (8) x64 Intel® Core™ i7-1068NG7 CPU @ 2.30GHz Memory: 500.91 MB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.5.0 - /usr/local/bin/node Yarn: 1.22.5 - ~.yarn/bin/yarn npm: 6.14.9 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.0 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2 Android SDK: Not Found IDEs: Android Studio: 4.1 AI-201.8743.12.41.6953283 Xcode: 12.3/12C33 - /usr/bin/xcodebuild Languages: Java: Not Found Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.4 => 0.63.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps To Reproduce

See above.

Expected Results

Image renders

[plnii]

I tested the above approach it seems to have worked. It turned out the defect I was experiencing was with React Native Elements, which use the same Image tag. I see they fixed the defect here: https://github.com/react-native-elements/react-native-elements/pull/2717

[mechazod]

@plnii I see, you can try this file structure.

.
|--src
|---App.js
|---images
|----test1.jpg
|----test2.png
|----...
index.js

Let say I’m inside App.js, then I want to load those two or more images

Access local files via import

import Image1 from './images/test1.jpg';

<Image source={Image1} />

Access local files via require

<Image source={require('./images/test2.png')} />