Image

One Image to rule them all.

... and in the darkness register the custom element and load them.

Example

import { Image } from '@wix/image';

function Example() {
  return <Image {...props} />
}

Installation

Install package

You can install the package via npm/yarn

> npm install -s @wix/image --registry http://npm.dev.wixpress.com/

or:

> yarn add @wix/image --registry http://npm.dev.wixpress.com/

Props

| Prop name | Type | Default | Description | | -------------- | ------------ | --------- | --------- | | id | string | - | System generated id | | containerId | string | - | Parent container id | | uri | string | - | Original image URI | | alt | string | - | Alternate text | | name | string | '' | Name of the image, used for generating a pretty URL | | role | string | - | Role | | width | number | - | Width of the original source image | | height | number | - | Height of the original source image | | displayMode | string | - | Method to use for fitting the image into its container (like CSS's object-fit property) : fill | fit | stretch | devicePixelRatio | number | - | Force a pixel-ratio to use for loading the image. Defaults to DPR of the device and using 2 as max | | quality | object | - | Image quality : quality: number ; unsharpMask: {radius: any;amount: any; threshold: any;} | | alignType | string | - | Alignment of the image. To note: if the image is larger than the container and the display mode is not set to fit or stretch, the alignment will refer to the container's position on the image. Otherwise, it will refer to the position of the image within the container. Options: center | top | top_left | top_right | left | right | bottom | bottom_left | bottom_right | | bgEffectName |string | '' | name of background scroll effect | | focalPoint | object | - | Image focal point (0 - 100). Relevant only if displayMode is set to fill, actual_size and original_size {x: number; y: number} | | upscaleMethod | string| - | auto | classic | super | | className |string | '' | Additional class names | | crop | object | - | Image crop (x & y are coordinates of the pixel to start cropping from). Flip and rotate parameters are relevant only if svgId is provided. { x: number; y: number; width: number; height: number; svgId?: string; flip?: 'vertical' \| 'horizontal' \| 'both' \| 'none'; rotate?: number;} | | imageStyles |object | {} | Inline styling | | targetWidth |number | - | Override for the rendered image element's width | | targetHeight |number | - | Override for the rendered image element's height | | containerWidth | number | - | Width in pixels of the container element | | containerHeight |number | - | Height in pixels of the container element | | onLoad | function | () => {} | Image's onLoad callback | | onError | function | () => {} | Image's onError callback | | shouldUseLQIP | boolean | - | Indicates whether component should use a low quality placeholder before loading the final high-quality image'| | getPlaceholder | function | - | function that returns placeholder uri and styling (if undefined and shouldUseLQIP true, the component will default to use getPlaceholder from the @imageKit) | | isInFirstFold | boolean | - | If true, render high quality image in SSR (currently only supported for images with known fixed size) | | placeholderTransition | string | 'blur' | Method of transition to use between placeholder and final image | | socialAttrs | object| - | {'data-pin-nopin'?: boolean; 'data-pin-url'?: string; 'data-pin-media'?: string;} | | isSEOBot | boolean | - | If true, render high quality image for indexing robots | | skipMeasure | boolean | false | If true, the measurement for the image will be skipped and given dimensions will be used instead.| | hasAnimation | boolean | false | Is the image an animated webp.|