Skip to content
Vy logo
Components
React

Image

[@portabletext/react] Unknown block type "introduction", specify a component for it in the `components.types` prop
import { Image } from "@vygruppen/spor-react";

Bruk

Image er et bilde med tilhørende bildetekst. Lengden på teksten burde ikke overstige fire linjer for at det ikke skal ta for mye plass og at det blir for langt til neste seksjon. Her er et eksempel på et bilde med bildetekst

<Box boxSize='sm'>
  <Image src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
</Box>

To bilder med bildetekst

Ei dame som klatre opp i fjell.

Bildetekst som beskriver noe om bildet over. Dette kan være over flere linjer.

Ei dame som klatre opp i fjell

Bildetekst som beskriver noe om bildet over. Dette kan være over flere linjer. Lengden på teksten burde ikke overstige fire linjer for at det ikke skal ta for mye plass og at det blir for langt til neste seksjon.

Bilde med border radius

<Image
  borderRadius='lg'
  boxSize='150px'
  src='https://bit.ly/dan-abramov'
  alt='Dan Abramov'
/>

Størrelser

Størrelsen på bildet kan du justeres ved hjelp av boxSize prop. 

<Stack direction='row'>
  <Image
    boxSize='100px'
    objectFit='cover'
    src='https://bit.ly/dan-abramov'
    alt='Dan Abramov'
  />
  <Image
    boxSize='150px'
    objectFit='cover'
    src='https://bit.ly/dan-abramov'
    alt='Dan Abramov'
  />
  <Image boxSize='200px' src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
</Stack>

Komponenter