Image doesn't render from local path with no extension (iOS only)
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
Reason is the file has no extension name when write to path! It doesn't master under iOS, not work under React native!
Remote url Image is loaded and stored using react-native-fs and named as Z23qdxp_348:
/var/mobile/Containers/Data/Application/500161AF-8D6A-4A97-B746-0D0E12421768/Library/Caches/Z23qdxp_348
Note: If the change image name to Z23qdxp_348.jpeg the image become visible. (Works even for jpg and png image formats).
Could to be related to #23844
Steps to reproduce
- Download remote image
- Save it without extension in fileUri variable.
- Render <Image source={{uri: fileUri}} onError={(error) => console.error(error)}>
- Result: No image if name does not have extension.
https://snack.expo.dev/@romick/local-ios-image-without-extension-issue-?platform=web
React Native Version
0.73.2
Affected Platforms
Runtime - iOS
Output of npx react-native info
info Fetching system and libraries information...
```text System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M1 Memory: 79.34 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.17.1 path: /usr/local/bin/node Yarn: version: 1.22.19 path: ~/.yarn/bin/yarn npm: version: 9.6.7 path: /usr/local/bin/npm Watchman: version: 2023.11.27.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.14.3 path: /Users/user/.rvm/gems/ruby-3.2.1/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 23.2 - iOS 17.2 - macOS 14.2 - tvOS 17.2 - watchOS 10.2 Android SDK: API Levels: - "28" - "29" - "30" - "31" - "33" - "34" Build Tools: - 28.0.3 - 29.0.2 - 29.0.3 - 30.0.2 - 30.0.3 - 31.0.0 - 33.0.0 - 33.0.1 - 34.0.0 System Images: - android-28 | Google APIs ARM 64 v8a - android-28 | Google ARM64-V8a Play ARM 64 v8a - android-31 | Google APIs ARM 64 v8a - android-32 | Google Play ARM 64 v8a - android-34 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10811636 Xcode: version: 15.1/15C65 path: /usr/bin/xcodebuild Languages: Java: version: 17.0.9 path: /usr/bin/javac Ruby: version: 3.2.1 path: /Users/user/.rvm/rubies/ruby-3.2.1/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: ^18.2.0 react-native: installed: 0.73.2 wanted: ^0.73.2 react-native-macos: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false ```Stacktrace or Logs
Image onError return localized error message:
Не вдалося відкрити файл «Z23qdxp_348.png», бо такого файлу немає.
That means:
The file "Z23qdxp_348.png" could not be opened, because this file does not exist.
Reproducer
https://github.com/Liqiankun/react-native-image-no-extension
Screenshots and Videos
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproducer and the <Image source={{uri: fileUri}}> example, then compare behavior on iOS for paths with and without extensions. Done means an image saved at an extensionless local path renders successfully on iOS, without the reported missing-file error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100