1//Local import (relative path)
2<Image source={require("./assets/snack-icon.png")} />
3//External import (web path) you should specify the width and height
4<Image source={{uri:"https://picsum.photos/200", width:200,height:200 }}/>
1<Image
2 source={require("relative_path_to_image")}
3 style={{ width: 100, height: 100 }}
4/>
1
2import React from 'react';
3import { View, Image, StyleSheet } from 'react-native';
4
5const styles = StyleSheet.create({
6 container: {
7 paddingTop: 50,
8 },
9 tinyLogo: {
10 width: 50,
11 height: 50,
12 },
13 logo: {
14 width: 66,
15 height: 58,
16 },
17});
18
19const DisplayAnImage = () => {
20 return (
21 <View style={styles.container}>
22 <Image
23 style={styles.tinyLogo}
24 source={require('@expo/snack-static/react-native-logo.png')}
25 />
26 <Image
27 style={styles.tinyLogo}
28 source={{
29 uri: 'https://reactnative.dev/img/tiny_logo.png',
30 }}
31 />
32 <Image
33 style={styles.logo}
34 source={{
35 uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
36 }}
37 />
38 </View>
39 );
40}
41
42export default DisplayAnImage;
1// useing require is more secure
2<Image
3 source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')}
4/>
1<Image //change imagePath with the real path of your image, for example ./src/image/image.jpg
2 source={require("imagePath")}
3/>