Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Image

GitHub

Examples

<Image src='https://www.vy.no/images/eyx1eny7/~alias-vyno-production/0a8e8e09b2c02a7a2261e98a77e54638011c07bb-7512x4984.tif?rect=0,469,7512,4226&w=1175&h=661&q=60&fit=crop&auto=format' alt='Bilde av tog som kjører gjennom snøfylt landskap' />

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

() => {
  const src =
    "https://www.vy.no/images/eyx1eny7/~alias-vyno-production/0a8e8e09b2c02a7a2261e98a77e54638011c07bb-7512x4984.tif?rect=0,469,7512,4226&w=1175&h=661&q=60&fit=crop&auto=format";

  const alt = "Bilde av tog som kjører gjennom snøfylt landskap";

  return (
    <Stack direction="row">
      <Image boxSize="150px" objectFit="cover" src={src} alt={alt} />
      <Image boxSize="250px" objectFit="cover" src={src} alt={alt} />
      <Image boxSize="350px" src={src} alt={alt} />
    </Stack>
  );
};

Guidelines

Når du bruker Image, må du alltid inkludere alt-attributtet med en kort, beskrivende tekst for tilgjengelighet. Bruk src for å angi bildefilen. Sett boxSize for størrelse, eller bruk CSS for responsiv design. Unngå Image for ren tekst eller viktige visuelle elementer. Dekorative bilder kan ha tom alt-tekst, men attributtet må være der.

Code

<Image />

import { Image } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
srcstringPath til bilde
altstringAlternativ tekst hvis bildet ikke kan vises. Også viktig for skjermlesere og SEO