Image

Description

Image is a VTEX component that allow to add any image on the store. This component can be imported and used by any VTEX App.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Table of Contents

Usage

You should follow the usage instruction in the main README.

To import it into your code:

1
import { Image } from 'vtex.store-components'

You can use it in your code like a React component with the jsx tag: <Image />.

1
2
3
4
<Image src="https://via.placeholder.com/150"
       alt="Nice photo"
       maxWidth="150px"
/>

Configuration

Prop nameTypeDescription
srcString!Specifies the URL of an image
altStringSpecifies an alternate text for an image
maxWidthStringSpecifies the max width of an image
maxHeightStringSpecifies the max height of an image
srcsetStringSpecifies the URL of the image to use in different situations
sizesStringSpecifies image sizes for different page layouts
linkLinkSpecifies the link the image will redirect when clicked on

Styles API

This app provides some CSS classes as an API for style customization. You should follow the Styles API instruction in the main README.

CSS namespaces

Below, we describe the namespaces that are defined in the Image.

Class nameDescriptionComponent Source
imageElementClass of the imageindex