Question

我知道我们可以使用以下方式加载本地图片：

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

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

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

它适用于网络映像，但不适用于本地映像，甚至对本地映像也没有任何错误，并且不会显示任何图像。谁能说出如何使用uri属性加载本地图片？

Answer 1

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

1）安装博览会资产：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/

Answer 2

这是三种使用本机渲染图像的方式，您可以对图片进行编码

您可以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文件 image.json

{imageString: '64encodedString'}

他们导入文件

import image from 'image.json';

然后图片

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

Answer 3

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

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

3 个答案: