Image react native
//PATH
<Image //change imagePath with the real path of your image, for example ./src/image/image.jpg
source={require("imagePath")}
/>
//URL
<Image //change imagePath with the real path of your image, for example ./src/image/image.jpg
source={{ uri: 'https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/female/68.png'}}
/>// useing require is more secure
<Image
source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')}
/><Image
source={{ uri: 'app_icon' }}
style={{ width: 40, height: 40 }}
/>
<Image //change imagePath with the real path of your image, for example ./src/image/image.jpg
source={require("imagePath")}
/> <Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>Adding Image
Let us create a new folder img inside the src folder. We will add our image (myImage.png) inside this folder.
We will show images on the home screen.
App.js
import React from 'react';
import ImagesExample from './ImagesExample.js'
const App = () => {
return (
<ImagesExample />
)
}
export default App
Local image can be accessed using the following syntax.
image_example.js
import React, { Component } from 'react'
import { Image } from 'react-native'
const ImagesExample = () => (
<Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
)
export default ImagesExample