Image

Image description.

Props

Image properties

Property	Description	Type	Default
src	Link to image source	`string`	-
alt	Description of the image	`string`	-
loading	Control if loading the image should be deferred when its off the screen	`eager` `lazy`	-
fit	Object-fit property of the image	`fill` `contain` `cover` `none` `scale-down`	`cover`

Usage

Basic Image

import { Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Image
      src="https://source.unsplash.com/V_WBdOLOgJU/600x500"
      alt="woman in orange knit cap and blue jacket"
    />
  </BrowserWindow>
);

import { Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Image
      src="https://source.unsplash.com/V_WBdOLOgJU/600x500"
      alt="woman in orange knit cap and blue jacket"
    />
  </BrowserWindow>
);

Loading

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex justify="space-between">
      <Image
        width="49%"
        src="https://source.unsplash.com/V_WBdOLOgJU/400x300"
        alt="woman in orange knit cap and blue jacket"
        loading="eager"
      />

      <Image
        width="49%"
        src="https://source.unsplash.com/V_WBdOLOgJU/400x300"
        alt="woman in orange knit cap and blue jacket"
        loading="lazy"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex justify="space-between">
      <Image
        width="49%"
        src="https://source.unsplash.com/V_WBdOLOgJU/400x300"
        alt="woman in orange knit cap and blue jacket"
        loading="eager"
      />

      <Image
        width="49%"
        src="https://source.unsplash.com/V_WBdOLOgJU/400x300"
        alt="woman in orange knit cap and blue jacket"
        loading="lazy"
      />
    </Flex>
  </BrowserWindow>
);