@wix/image

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.