The Image component allows one to display images.
function Example() {
return <Image shadow={2} source={{
uri: 'https://wallpaperaccess.com/full/317501.jpg'
}} alt="Alternate Text" size="xl" />;
}
You can use all props of React native Image.
function Example() {
return <Center>
<Image source={{
uri: "https://wallpaperaccess.com/full/317501.jpg"
}} alt="Alternate Text" size="xl" />
</Center>;
}
function Example() {
return <>
<Heading mb="10" textAlign="center" mt="3">
Image Sizes
</Heading>
<ScrollView px="20">
{
}
<VStack space={2} justifyContent="center" alignItems="center" safeAreaTop
mb={6}>
{["xs", "sm", "md", "lg", "xl", "2xl"].map(size => <Image key={size} size={size} resizeMode="cover" source={{
uri: "https://wallpaperaccess.com/full/317501.jpg"
}} alt={"Alternate Text " + size} />)}
</VStack>
{
}
</ScrollView>
</>;
}
function Example() {
return <Center>
<Image size={150} resizeMode={"contain"} borderRadius={100} source={{
uri: "https://wallpaperaccess.com/full/317501.jpg"
}} alt="Alternate Text" />
</Center>;
}
function Example() {
return <Center>
<Image size={150} alt="fallback text" borderRadius={100} source={{
uri: "https://-page-icon.png"
}} fallbackSource={{
uri: "https://www.w3schools.com/css/img_lights.jpg"
}} />
</Center>;
}
function Example() {
const myRef = React.useRef(null);
React.useEffect(() => {
if (myRef.current && myRef.current.setNativeProps) myRef.current.setNativeProps({
borderWidth: 10,
opacity: 0.5
});
}, [myRef]);
return <Center>
<Image ref={myRef} source={{
uri: "https://wallpaperaccess.com/full/317501.jpg"
}} alt="Alternate Text" size="xl" />
</Center>;
}
Image implements
,
,
,
,
,
,
,
,
,
With Next's require statement
When using require statement from next for image keep this in mind.
const img = require('/public/me.jpg');
<Image
source={{ uri: img.default.src }}
width={500}
height={500}
/>
<Image
source={img}
width={500}
height={500}
/>