Hopp til innhold

Image

Bildekomponenten viser et bilde i riktig oppløsning ut fra størrelsen det vises i på skjermen, og kan vise en lavoppløselig forhåndsvisning under innlasting av store bilder.

BrukDesignKode

Kom i gang

Installer
npm i @fremtind/jkl-image-react
Bruk
import { Image } from "@fremtind/jkl-image-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-image/image.min.css";
React
Versjon
Dokumentasjon
Readme
Changelog
Migration

Bruk

/**

 * stilark:

 * .static {

 *     width: 100%;

 *     aspect-ratio: 4/3;

 * }

 * .fluid {

 *     width: 100%;

 *     height: 25rem;

 * }

 */



import dog400 from "./assets/dog-400.jpg";

import dog800 from "./assets/dog-800.jpg";

import dog1200 from "./assets/dog-1200.jpg";

import dog1920 from "./assets/dog-1920.jpg";

import thumbnail from "./assets/thumbnail.jpg";



// Du kan få disse verdiene automatisk ved å bruke f.eks. responsive-loader i webpack

const imageSource = {

  src: dog400,

  srcSet: `${dog400} 400w, ${dog800} 800w, ${dog1200} 1200w, ${dog1920} 1920w`,

  placeholder: thumbnail,

};



return (

  <Image

    {...imageSource}

    alt="Bilde av en sort hund av typen mops, kledd opp i en skjorte av blått jeansstoff"

    className="static"

  />

);

React API

Her finner du en oversikt over props på komponentene i pakken.