React Native-在图像中加载本地图像

Question

我使用实际的反应本机，并尝试用加载的文件显示图像;由react-native-fs保存在App的Caches文件夹中（在iOS模拟器上）在我的组件的render方法中，我使用以下方式：

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}} />

它在调试控制台中生成错误消息：

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

如何正确显示此类图像文件？我也尝试将file://添加到logoPath，但这有相同的结果。

Answer 1

对我感到羞耻：我只是忘记了添加 import {Image} from 'react-native'。

Answer 2

我建议您对 require这样的图像如此：

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} />

为什么？因为这个