code/tamagui.dev/data/docs/components/tamagui-image/2.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 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.`,
},
]}
/>