How to display image in react native application using online URL step by step example with source code.
Hello Guys, Today we would going to learn about showing image in react native application using online website HTTP URL. As we all know that react native is in its evolving stage because of it is platform independent. So let’s get started. Before going further please read my previous tutorial about Installing React Native on Windows.
Note: There is no need to add internet permission.
Contents in this project Show Image From HTTP URL in React Native :-
- Start a fresh React Native project. If you don’t know how then read my this tutorial.
- Add Image component in import block.
- Create let variable in render block with.
- Assign Image Url to let variable using uri .
- Add Image tag in render’s return block.
- Add Source attribute in Image tag and Assign Let variable name to it.
- Add inline style to Image tag.
- Complete source code.
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add Image component in import block.
|
1 2 3 |
import { AppRegistry, Image } from 'react-native'; |
3. Create let variable in render block with.
|
1 |
let Image_Http_URL ; |
4. Assign Image URL to let variable using uri .
|
1 |
let Image_Http_URL ={ uri: 'https://reactnativecode.com/wp-content/uploads/2017/05/react_thumb_install.png'}; |
5. Add Image tag in render’s return block.
|
1 2 3 4 5 |
return ( <Image /> ); |
6. Add Source attribute in Image tag and Assign Let variable name to it.
|
1 2 3 |
return ( <Image source={Image_Http_URL}} /> ); |
7. Add inline style to Image tag.
|
1 2 3 |
return ( <Image source={Image_Http_URL} style = {{height: 200, resizeMode : 'stretch', margin: 5 }} /> ); |
8. Complete Source Code for index.android.js file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React, { Component } from 'react'; import { AppRegistry, Image } from 'react-native'; export default class Myproject extends Component { render() { let Image_Http_URL ={ uri: 'https://reactnativecode.com/wp-content/uploads/2017/05/react_thumb_install.png'}; return ( <Image source={Image_Http_URL} style = {{height: 200, resizeMode : 'stretch', margin: 5 }} /> ); } } AppRegistry.registerComponent('Myproject', () => Myproject); |
Screenshot :-
how do i save captured image to remote server folder
Rohit i will soon publish a new tutorial regarding your query 🙂 .
thank you so much for your help i really appreciate it.
Welcome Rohit .
and what if image url not working or you didn’t get image.
How to apply placeholder.
Mahesh read my this tutorial https://reactnativecode.com/show-error-message-if-image-load-failed-react-native/ this would help you 🙂 .
I have tried your method but it can display the image in iOS but not in Android, may I know why?
John this method is working in both devices , please check your internet connection in android device .
Hi Admin, can you please upload the example on how use RSA in react-native,
“react-native-rsa-native”
Sure Mayur we will soon upload a new tutorial regarding to your query 🙂 .
how to add multiple images url in react native
so helpful and active man, love u