question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if youā€™re still stuck at the end, weā€™re happy to hop on a call to see how we can help out.

Image doesn't render local source (path with no extension name)

See original GitHub issue

šŸ› Bug Report

// write image to local path(iOS native code)
  NSString *path = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES).firstObject;
  NSString *filePath = [path stringByAppendingPathComponent:[NSString stringWithFormat:@"image"]];
  [UIImagePNGRepresentation(image) writeToFile:filePath atomically:YES]

// under iOS (it works great)
[UIImage imageWithContentsOfFile: filePath];

// under react native (Could not find image filePath)
<Image source={{ uri:  filePath }} />

// If the filePath with extension name it works on both
  NSString *filePath = [path stringByAppendingPathComponent:[NSString stringWithFormat:@"image.png"]];
  [UIImagePNGRepresentation(image) writeToFile:filePath atomically:YES]

Reason

Reason is the file has no extension name when write to path! It doesnā€™t master under iOS, not work under React native! Simulator Screen Shot - iPhone XS - 2019-03-11 at 11 38 27

Code Example & Reproduce

Github react-native-image-no-extension

Why I need to render image from local source

My project is using a iOS native IM framework. The framework save image to the local path without extension. Now I build chat ui by react native, so I must be able to render the image!

Environment

React Native Environment Info: System: OS: macOS 10.14.3 CPU: (4) x64 IntelĀ® Coreā„¢ i5-7360U CPU @ 2.30GHz Memory: 93.95 MB / 8.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 8.11.1 - /usr/local/bin/node Yarn: yarn install v0.22.0 [1/4] Resolving packagesā€¦ [2/4] Fetching packagesā€¦ [3/4] Linking dependenciesā€¦ [4/4] Building fresh packagesā€¦ success Saved lockfile. Done in 14.56s. - /usr/local/bin/yarn npm: 6.7.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1 Android SDK: API Levels: 23, 26, 27, 28 Build Tools: 27.0.3, 28.0.3 System Images: android-28 | Intel x86 Atom_64 IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: react: 16.8.4 => 16.8.4 react-native: 0.59.0 => 0.59.0 npmGlobalPackages: create-react-native-app: 1.0.0 react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

github_iconTop Results From Across the Web

React won't load local images - Stack Overflow
Best way to load local images in react is as follows ... anywhere from the project, by just giving '/path_to_image' and no need...
Read more >
Why can I not see the images on my website? - Encode.Host
The image file is not located in the same location that is specified in your IMG tag. The image does not have the...
Read more >
7 Reasons Why Images Are Not Loading on Your Website
1. Incorrect File Paths Ā· 2. Files Names Misspelled Ā· 3. Wrong File Extensions Ā· 4. Missing Files Ā· 5. The Website Hosting...
Read more >
How to display local images in Chrome using file:// protocol?
8 Answers 8 Ā· Make sure 'Developer mode' is checked (Top right of page) Ā· Click the 'Load Unpacked Extension' button Ā· Navigate...
Read more >
Images - React Native
For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension: <Image
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found