Image
An image component that load an appropriate sized image by itself.
This component works with googleCloud images only!
How to use
$3
``
yarn add @home-app/image.component
$3
`
javascript
import Image from "@home-app/image.component";
`
$3
`
javascript
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
``
$3
- 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.