Android React Native-如何使用图像组件中的uri加载本地图像？

我知道我们可以加载本地映像：

<Image source={require('folder/image.png')}/>

<Image source={{uri: 'folder/image.png'}}/>

但我需要像这样加载图像：

<Image source={require('folder/image.png')}/>

<Image source={{uri: 'folder/image.png'}}/>

---

它适用于网络图像，但不适用于本地图像，甚至对本地图像也不会给出任何错误，并且不会以静默方式显示图像。有人能告诉我如何使用

uri

属性加载本地图像吗？

以下是在react native中呈现图像的三种方法， 在您的情况下，您可以对图像进行编码

• 您可以

  要求

  图像

  source={require（'/react native/img/favicon.png'）}

• 您可以从web上获取图像

  source={{uri:'https://facebook.github.io/react-native/docs/assets/favicon.png“}}

• 或者你可以对图像进行编码

  source={uri:'数据：image/png；base64，ivborw0kgoaansuhueugaadmaazcayaaaa6otaqaaaaaexrfwhrtb2z0d2fyzqbwbmdjcnvzaeb1sfmaaabqurbvgj7dsxqbacarb+2/ab8beeqnhfi6wsyzylyuddqygbgygbgggzmcvdqygbgjgbggqmhjgbgqw+p/emrc5utvaaabjbru5erjgg='>
  

如以下所示

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
        <Image
          source={require('/react-native/img/favicon.png')}
        />
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
        />
        <Image
          style={{width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
}

让他们导入文件

import image from 'image.json';

然后想象

<Image source:{{uri:image.imageString}} />

---

如果您正在使用Expo构建React本机应用程序，这可能会有帮助：

1） 安装世博会资源：

expo安装世博会资源

2） 初始化并设置imageUri：

import {Asset} from 'expo-asset';

const imageURI = Asset.fromModule(require('../../assets/test.png')).uri;

3） 在我的例子中，我需要在NativeBase的缩略图上显示它：

<Thumbnail square source={{uri: imageURI}}/>

---

文档：

在AndroidManifest文件中添加android:requestLegacyExternalStorage=“true”

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:requestLegacyExternalStorage="true" <=== here
  android:theme="@style/AppTheme">

---

那么，您的意思是不可能使用
uri加载本地图像
？可以使用{{{url:'asset:local_file'}加载本地图像。这仍然需要使用
require
，这比将所有
require
方法放入js对象要好吗？例如，
导出默认值{image:require（'./image.jpg'）}
@Colo ghidi谢谢这也帮助找到了解决方案