Image

An image component that load an appropriate sized image by itself.

This component works with googleCloud images only!

How to use

Install:

yarn add @home-app/image.component

Import:

import Image from "@home-app/image.component";

Use:

const baseURL = 'http://...';

const TABLET_WIDTH = 768;
const DESKTOP_WIDTH = 1024;
const LARGE_DESKTOP = 1440;
// it`s an object that contains mapping a screen width onto the image dimensions
const mediaDimensions = {
  [TABLET_WIDTH]: 500, // it means that for a media 'max-width: 767px' will be loaded an image with width=500px and proportionally resized height
  [DESKTOP_WIDTH]: {width: 900, height: 400}, // the image will be resized and cropped
  [LARGE_DESKTOP]: {height: 400}, // width will be proportionally resized to the specified height  
};

// ... some code

<Image src={baseURL} alt='' dimensions={mediaDimensions} />

NB:

• For that will not be caught by media queries the baseUrl will be used. So, it means if an 200px width is used as a base, it will be dramatically blurred on a 1500px screen... It is strongly recommended to use high resolution images for a base.