Back to Woocommerce

ProductImage

packages/js/components/src/product-image/README.md

10.9.0-dev1.0 KB
Original Source

ProductImage

Use ProductImage to display a product's or variation's featured image. If no image can be found, a placeholder matching the front-end image placeholder will be displayed.

Usage

jsx
// Use a real WooCommerce Product here.
const product = {
	images: [
		{
			src: 'https://cldup.com/6L9h56D9Bw.jpg',
		},
	],
};

<ProductImage product={ product } />

Props

NameTypeDefaultDescription
widthNumber60The width of image to display
heightNumber60The height of image to display
classNameString''Additional CSS classes
productObjectnullProduct or variation object. The image to display will be pulled from product.images or variation.image. See Product properties and Product variation properties.
altStringnullText to use as the image alt attribute