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

【问题标题】：React Native - How to load local image using the uri in Image Component?React Native - 如何使用图像组件中的 uri 加载本地图像？
【发布时间】：2019-05-15 16:35:44
【问题描述】：

我知道我们可以加载本地图片：

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

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

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

它适用于网络图像，但它不适用于本地图像，甚至它不会对本地图像产生任何错误，并且不会静默显示图像。谁能告诉如何使用uri 属性加载本地图像？

【问题讨论】：

标签： android ios reactjs image react-native

【解决方案1】：

在 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">

【讨论】：

【解决方案2】：

如果您使用 Expo 来构建您的 React Native 应用程序，这可能会有所帮助：

1) 安装 expo-asset：expo install expo-asset

2) 初始化并设置你的 imageUri：

import {Asset} from 'expo-asset';

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

3) 就我而言，我需要它来自 NativeBase 的缩略图：

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

文档：https://docs.expo.io/versions/latest/sdk/asset/

【讨论】：

这还是要使用require，这比把所有require方法都放到一个js对象里好么？例如。 export default { image: require('./image.jpg') }
@Colo Ghidini 感谢这也有助于找到解决方案

【解决方案3】：

这是在 react-native 中渲染图像的三种方式，在您的情况下，您可以对图像进行编码

你可以require图片

source={require('/react-native/img/favicon.png')}
你可以从网上获取图片

source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
或者你可以对图像进行编码

source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}

按照文档建议如下

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>
    );
  }
}

或者您可以创建一个包含图像编码字符串的 json 文件图像.json

{imageString: '64encodedString'}

他们导入文件

import image from 'image.json';

然后是图片

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

【讨论】：

那么，你的意思是不能用uri来加载本地图片？
可以使用 {{url:'asset:local_file'}} 加载本地图片