source
- React Native course
- Beginner
- Lesson 66/116
- 5 min
Learn local and remote images with the source prop.
source: local and remote
The source prop works in two ways. Remote images take a {`{ uri: '...' }`} object; local images use a require call.
For a local image: source={'{ require('./assets/logo.png') }'}. The path is relative to your project's assets folder. The extension can be .png, .jpg or .webp.
Local images are bundled into the app; they need no internet and load faster. Remote images can change dynamically; for example, product photos from a server.
Loading remote images
Remote images may show an empty box while they download. You can show a loading image with loadingIndicatorSource; a small spinner image works well.
If the load fails, the onError prop receives a function. You can catch the error and show a fallback image.
This lesson focuses on the basic flow of remote images: giving uri is enough. Fallback and loading patterns get a deeper treatment at the advanced level.
Practice Show a local logo
Write an <Image> and give its source prop require('./assets/logo.png'). Add style with width: 100 and height: 100. Export the App function.
Starter code
import { Image } from 'react-native';
// write the local logo hereSample solution
function App() {
return (
<Image
source={require('./assets/logo.png')}
style={{ width: 100, height: 100 }}
/>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Local image source
import { Image } from 'react-native';
function App() {
return (
<Image source={____('./assets/logo.png')} style={{ width: 80, height: 80 }} />
);
}import { Image } from 'react-native';
function App() {
return (
<Image source={require('./assets/logo.png')} style={{ width: 80, height: 80 }} />
);
}Explanation: require bundles the local image into the app.
2 What does source take for a remote image?
- A number Correct answer
- Only a string
- A { uri: '...' } object
- A color value
Explanation: an object with a uri key is passed.
3 Match the source types
| Term | Meaning |
|---|---|
require |
Local image |
uri |
Remote image address |
loadingIndicatorSource |
Loading image |
onError |
Error handler |