# Source: https://tamagui.dev/ui/image.md

---
title: Image
description: React Native Web Image + Tamagui style props.
name: html
component: Image
package: image
demoName: Image
---

<HeroContainer noPad>
  <ImageDemo />
</HeroContainer>

```tsx hero template=Image

```

<Highlights
  features={['Supports SSR.', 'Works on native and web.', 'Accepts Tamagui style props.']}
/>

## Installation

Image is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/image
```

## Usage

Note that you need to set `source` like so - the `width` and `height` properties apply as styles around the image, but the actual image needs `source.width` and `source.height` for React Native:

```tsx
export default () => (
  <Image
    source={{ width: 200, height: 200, uri: 'https://...' }}
    width="100%"
    height="100%"
  />
)
```

## API Reference

### Image

[Tamagui props](/docs/intro/props) + [React Native Web Image props](https://necolas.github.io/react-native-web/docs/image/).