2016-06-20 22:05:20 +00:00
---
id: basics-component-image
title: Image
layout: docs
2016-06-22 21:19:25 +00:00
category: The Basics
2016-06-20 22:05:20 +00:00
permalink: docs/basics-component-image.html
next: basics-component-view
---
2016-06-22 17:00:12 +00:00
Another basic React Native component is the [`Image` ](/react-native/docs/image.html#content ) component. Like `Text` , the `Image` component simply renders an image.
2016-06-20 22:05:20 +00:00
2016-06-22 17:00:12 +00:00
> An `Image` is analogous to the `<img>` HTML tag when building websites.
2016-06-20 22:05:20 +00:00
The simplest way to render an image is to provide a source file to that image via the `source` attribute.
This example displays a checkbox `Image` on the device.
2016-06-22 22:02:02 +00:00
```ReactNativeWebPlayer
2016-06-20 22:05:20 +00:00
import React from 'react';
import { AppRegistry, Image } from 'react-native';
2016-06-22 17:00:12 +00:00
const AwesomeProject = () => {
2016-06-20 22:05:20 +00:00
return (
2016-06-22 22:02:02 +00:00
< Image source = {require('./img/favicon.png')} / >
2016-06-20 22:05:20 +00:00
);
}
// App registration and rendering
2016-06-22 17:00:12 +00:00
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
2016-06-20 22:05:20 +00:00
```