react native image

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<Image
2  source={{ uri: 'app_icon' }}
3  style={{ width: 40, height: 40 }}
4/>
5

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/>