facebook
Can't display Image with source as required()
Description
Couldn't include images with source targeting the required() includes such as:
Steps to reproduce
Description
As I've encountered the same issue with my own code where image doesn't get loaded if it's loading from "required" source, i went into the official documentation.
Inside the docs https://reactnative.dev/docs/image there are only 2 images out of coded 3 images loaded. This image isn't loaded as well:
<Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} />
resulting a missing image:
As seen in source, the image isn't even added to the sources (same thing i encounter in my app):
Documentation version
0.74
Extra information:
Recreated same behavior with my react environment.
React Native Version
0.73.6
Affected Platforms
Runtime - Web, Build - Windows
Output of npx react-native info
System:
OS: Windows 11 10.0.22631
CPU: "(12) x64 AMD Ryzen 5 5600H with Radeon Graphics "
Memory: 2.26 GB / 13.86 GB
Binaries:
Node:
version: 20.11.0
path: C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm:
version: 10.2.4
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-221.6008.13.2211.9619390
Visual Studio: Not Found
Languages:
Java:
version: 19.0.2
path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.6
wanted: 0.73.6
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
info React Native v0.74.0 is now available (your project is running on v0.73.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.74.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".
Stacktrace or Logs
It's a runtime visual non-rendering without a crash.
Reproducer
https://reactnative.dev/docs/image
Screenshots and Videos
| :warning: | Newer Version of React Native is Available! |
|---|---|
| :information_source: | You are on a supported minor version, but it looks like there's a newer patch available - 0.73.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases. |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
| :warning: | Missing Reproducible Example |
|---|---|
| :information_source: | We could not detect a reproducible example in your issue report. Please provide either:
|
No, same behavior on android and same on web: image doesn't get displayed:
No, same behavior on android and same on web: image doesn't get displayed:
Android working fine for me. But on web image is not visible.
Confirming that it's actually only Web that is not working. Android works (my mistake in android test). Reproduced issue is on official documentation: https://reactnative.dev/docs/image
@SmileHub would you mind filing an issue for this on the react-native-web repo? Though Expo might also be doing special things for bundling. cc @necolas
Converting an inline require of images into a URL is a web bundler thing, not responsibility of RNfWeb. Best to open an issue against Expo / Metro. We can close this as it's not an RN issue either.
