我知道我们可以加载本地图像:
<Image source={require('folder/image.png')}/>
但我需要像这样加载图像:
<Image source={{uri: 'folder/image.png'}}/>
它适用于网络图像,但它不适用于本地图像,甚至它不会为本地图像提供任何错误并且静默地不显示图像。谁能告诉如何使用该uri
属性加载本地图像?
我知道我们可以加载本地图像:
<Image source={require('folder/image.png')}/>
但我需要像这样加载图像:
<Image source={{uri: 'folder/image.png'}}/>
它适用于网络图像,但它不适用于本地图像,甚至它不会为本地图像提供任何错误并且静默地不显示图像。谁能告诉如何使用该uri
属性加载本地图像?
如果您使用 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}}/>
这些是在 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=='}}
正如 doc 建议如下
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>
);
}
}
或者您可以创建一个包含图像 image.json 编码字符串的 json 文件
{imageString: '64encodedString'}
他们导入文件
import image from 'image.json';
然后图像
<Image source:{{uri:image.imageString}} />
android:requestLegacyExternalStorage="true"
在 AndroidManifest 文件中添加。
<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">