mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-28 07:09:50 +00:00
zeekay
a572ed7c00
Migrated 93 MDX pages from old Tamagui-based site to @hanzo/docs system: - 13 intro pages (installation, props, styles, themes, etc.) - 22 core pages (configuration, styled, variants, animations, etc.) - 48 component pages (button, dialog, select, toast, etc.) - 14 guide pages (next-js, expo, vite, webpack, metro, etc.) Zero tamagui references. Uses @hanzo/docs-base-ui + @hanzo/docs-mdx.
87 lines
2.0 KiB
Plaintext
87 lines
2.0 KiB
Plaintext
---
|
|
title: Image
|
|
description: Web compatible and super light image component with Hanzo GUI style props
|
|
name: gui-image
|
|
component: Image
|
|
package: image
|
|
demoName: WebNativeImageDemo
|
|
---
|
|
|
|
- Web compatible.
|
|
- Supports SSR.
|
|
- Works on native and web.
|
|
- No react-native-web dependency.
|
|
- Super light.
|
|
## Installation
|
|
|
|
Image is already installed in `@hanzo/gui`, or you can install it independently:
|
|
|
|
```bash
|
|
npm install @hanzogui/image
|
|
```
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
export default () => <Image src="https://..." width={300} height={400} />
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Image
|
|
|
|
[Gui props](/docs/intro/props) +
|
|
[Web img props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) +
|
|
[React Native Image props](https://necolas.github.io/react-native-web/docs/image/).
|
|
|
|
<Notice>
|
|
All web [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) props are
|
|
supported on web, and all native
|
|
[Image](https://necolas.github.io/react-native-web/docs/image/) props are supported on
|
|
native. On native we are still using web img APIs, but not all web img props are
|
|
supported, like `decoding`.
|
|
</Notice>
|
|
|
|
#### Some common props
|
|
|
|
<PropsTable
|
|
data={[
|
|
{
|
|
name: 'src',
|
|
required: true,
|
|
type: 'string',
|
|
description: `The image URL.`,
|
|
},
|
|
{
|
|
name: 'alt',
|
|
required: false,
|
|
type: 'string',
|
|
description: `Mandatory and incredibly useful for accessibility.`,
|
|
},
|
|
{
|
|
name: 'objectFit',
|
|
required: false,
|
|
type: 'CSS.ObjectFit',
|
|
description: `Sets how the content of the image is resized to fit its container. An alternative to the \`resizeMode\` prop.`,
|
|
},
|
|
{
|
|
name: 'unstyled',
|
|
required: false,
|
|
type: 'boolean',
|
|
description: `When true, removes all default styles.`,
|
|
},
|
|
{
|
|
name: 'onLoad',
|
|
required: false,
|
|
type: 'function',
|
|
description: `Callback when the image is loaded.`,
|
|
},
|
|
{
|
|
name: 'onError',
|
|
required: false,
|
|
type: 'function',
|
|
description: `Callback when the image fails to load.`,
|
|
},
|
|
]}
|
|
/>
|