image react native

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={{ 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
2        style={styles.tinyLogo}
3        source={require('@expo/snack-static/react-native-logo.png')}
4     	/>

1Adding Image
2Let us create a new folder img inside the src folder. We will add our image (myImage.png) inside this folder.
3
4We will show images on the home screen.
5
6App.js
7import React from 'react';
8import ImagesExample from './ImagesExample.js'
9
10const App = () => {
11   return (
12      <ImagesExample />
13   )
14}
15export default App
16Local image can be accessed using the following syntax.
17
18image_example.js
19import React, { Component } from 'react'
20import { Image } from 'react-native'
21
22const ImagesExample = () => (
23   <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
24)
25export default ImagesExample