Image

Forhåndsvisningen, eller thumbnail, vil vises uskarpt først, og animeres til et skarpt fullstørrelse bilde når det er lastet ferdig.

For å få mest ut av denne komponenten må du sende inn et srcSet, altså en liste over bilder i forskjellig oppløsning sammen med informasjon om bildenes bredde. Dette brukes av nettleseren for å laste ned riktig bilde i forhold til størrelse og skjermoppløsning. Du kan generere dette automatisk, f.eks. ved hjelp av responsive-loader for Webpack, eller sette det sammen manuelt.

Det er også mulig å sende inn kun ett enkelt bilde som kilde. I så fall lastes bildet inn på vanlig måte, uten forhåndsvisning.

Dette er ment som et hjelpeverktøy hovedsakelig til dekorative bilder. Det er ikke meningen at vi skal animere inn ikoner på denne måten, for eksempel.

Dersom utvikleren allerede har liknende hjelpemidler, for eksempel i Gatsby, trenger de ikke bruke denne komponenten.