React Native认为图像是一个模块

Question

这可能看似重复但我已经在Stack上回答了可能有十几个类似的问题，但没有一个解决方案适合我。

React Native docs表示加载到本地图像，如下所示：

<Image source={require('./my-icon.png')} />

我已将图片3D-home2@x.jpg放在与JS文件相同的文件夹中：

我也尝试将它放在项目根目录：

我还尝试将其放入Images.xcassets并加载require('image!3D-home')。

在这些努力之间，我使用yarn start -- --reset-cache多次清除了模块缓存。完整的XCode项目已经多次“清理”并重建了应用程序。无论我做什么，我都会得到一些错误（项目名称编辑）：

我在这里做错了什么？看起来我完全按照说明操作，但是无法加载图像。

<Image
    style={{
        position: 'absolute',
        width: '100%',
        height: '100%',
        top: 0,
        left: 0,
        zIndex: 10
    }}
    source={ require('./3D-home@2x.jpg') }
/>

Answer 1

解决方案是从文件名中删除@2x。这是因为React Native提供了使用后缀自动交换图像的功能，所以我不知不觉地试图不正确地做这件事：

  

您还可以使用@ 2x和@ 3x后缀为其提供图像   不同的屏幕密度。

https://facebook.github.io/react-native/docs/images.html