code/tamagui.dev/data/docs/components/tamagui-image/1.0.0.mdx
<Highlights features={[ 'Web compatible.', 'Supports SSR.', 'Works on native and web.', 'No react-native-web dependency', 'Super light', ]} />
Image is already installed in tamagui, or you can install it independently:
npm install @tamagui/image
export default () => <Image src="https://..." width={300} height={400} />
Tamagui props + Web img props + React Native Image props.
<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><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 image is resized to fit its container. it's alternative to resizeMode prop,
},
{
name: 'unstyled',
required: false,
type: 'boolean',
description: When true will remove all default styles,
},
{
name: 'onLoad',
required: false,
type: 'function',
description: Callback when image is loaded,
},
{
name: 'onError',
required: false,
type: 'function',
description: Callback when image fails to load,
},
]}
/>