Image
- React Native course
- Beginner
- Lesson 65/116
- 4 min
Learn to display images with the Image component.
The Image component
The Image component displays a picture on the screen. It is used for photos, icons or drawings. The <Image /> tag alone is not enough; you must tell it which picture to show through the source prop.
The simplest form is <Image source={'{ uri: 'https://.../logo.png' }'} />. Here uri is the address of a remote image. For local images you use require; that is the next lesson.
Image does not have a default size. Without width and height the picture stays invisible. Always add width and height through style.
Basic Image usage
For a remote image you give source a {`{ uri: '...' }`} object. The key uri is case sensitive and written lowercase.
A complete example: <Image source={'{ uri: 'https://example.com/cat.png' }'} style={'{ width: 200, height: 120 }'} />. This tag shows the cat picture in a 200x120 pixel box.
For security, prefer HTTPS for remote images. iOS requires an info.plist entry for HTTP requests; in production you usually stick to HTTPS.
Practice Show a cat image
Write an <Image> with size 200x140. Give it source={'{ uri: 'https://example.com/cat.png' }'}. Export the App function.
Starter code
import { Image } from 'react-native';
// write the Image component hereSample solution
function App() {
return (
<Image
source={{ uri: 'https://example.com/cat.png' }}
style={{ width: 200, height: 140 }}
/>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does Image always need?
- Only a background color
- Only a border
- Only text
- source and a size Correct answer
Explanation: source picks the picture, width and height set the size.
2 Import Image
import { View, ____ } from 'react-native';import { View, Image } from 'react-native';Explanation: Image is imported from the react-native package.
3 Match the Image parts
| Term | Meaning |
|---|---|
source |
Holds the image address |
uri |
Remote image address |
width |
Image width |
height |
Image height |