Image

Last updated: 2.0.0 (21/01/2024)

Usage

import { Image } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Image
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
            alt="A random image"
        />
    )
}

Override width & height

import { Image } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Image
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
            alt="A random image"
            
            width={200}
            height={300}
        />
    )
}

Override fit & position

import { Image } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Image
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
            alt="A random image"
            
            fit="fill"
            position="center"
        />
    )
}

Custom placeholder

import { Image, Flex, Text } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Image
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
            alt="A random image"
            
            placeholder={
                <Flex
                    align="center"
                    justify="center"
                    height="100%"
                    width="100%"
                >
                    <Text>
                        Image not found
                    </Text>
                </Flex>
            }
        />
    )
}

---

Props

Extends GenericImageProps and GenericProps.

Property	Type	Description
placeholder	ReactNode	Placeholder content for this image.
radius	ComponentSize	Defines the border radius size class of this image. Defaults to the theme default radius size class.
width	CSSProperties["width"]	Sets width css property.
height	CSSProperties["height"]	Sets height css property.
square	boolean	Shorthand for aspect-ratio = "1/1".
color	CSSProperties["color"]	Sets color css property.
shadow	boolean	Specifies if a shadow will be shown.

GenericImageProps

Property	Type	Description
src (required)	string | ArrayBuffer | undefined	Source URI of this image.
alt (required	string	Alt text for this image.
fit	CSSProperties["objectFit"]	Sets object-fit css property.
position	CSSProperties["objectPosition"]	Sets object-position css property.