CODEWITHSUNDEEP
iosimagereact-native
Sound Blaster
Sound Blaster

Reputation: 4919

React Native - Loading local image in Image

I use actual React Native and try to show Image with file that is loaded & saved by react-native-fs in app's Caches folder (on iOS Simulator) In my component's render method I use this :

let logoPath = '/Users/emerkushev/Library/Developer/CoreSimulator/Devices/33E9E1E9-70EF-4DCF-AAC7-AD194F567F14/data/Containers/Data/Application/AEA3B326-EF82-418F-915F-9657E0DEE3DE/Library/Caches/111709.102.logo.png'
...
<Image source={{uri: logoPath}} style={{width: 300, height: 300}} />

It generates an error message in debug console:

Image is not defined
    handleException @   ExceptionsManager.js:63
    handleError @   InitializeCore.js:114
    reportFatalError    @   error-guard.js:44
    guard   @   MessageQueue.js:48
    callFunctionReturnFlushedQueue  @   MessageQueue.js:107
    (anonymous) @   debuggerWorker.js:71

ExceptionsManager.js:71 Unhandled JS Exception: Image is not defined
    reactConsoleErrorHandler    @   ExceptionsManager.js:71
    console.error   @   YellowBox.js:61
    logIfNoNativeHook   @   RCTLog.js:38
    __callFunction  @   MessageQueue.js:236
    (anonymous) @   MessageQueue.js:108
    guard   @   MessageQueue.js:46
    callFunctionReturnFlushedQueue  @   MessageQueue.js:107
    (anonymous) @   debuggerWorker.js:71

How does need to show properly this type of image files? Also I tried to add file:// to the logoPath, but this had a same result.

Upvotes: 1

Views: 4845

Answers (2)

Luis Rizo
Luis Rizo

Reputation: 2109

I recommend you to require the images like so:

logoPath = require('/Users/emerkushev/Library/Developer/CoreSimulator/Devices/33E9E1E9-70EF-4DCF-AAC7-AD194F567F14/data/Containers/Data/Application/AEA3B326-EF82-418F-915F-9657E0DEE3DE/Library/Caches/111709.102.logo.png');
<Image source={logoPath} />

Why? Because of this

Upvotes: 1

Sound Blaster
Sound Blaster

Reputation: 4919

Shame on me: I just had forgotten to add import {Image} from 'react-native'.

Upvotes: 2

Related Questions