Image by vtex

The image block renders images in the storefront.

Configuration

Import the vtex.store-components app to your theme dependencies in the manifest.json file as in the following example:


_10  "dependencies": {
_10    "vtex.store-components": "3.x"
_10  }

Add the image block to any template you choose.
Then, declare the image block using the props stated in the Props table. For example:


_10  "image#example": {
_10    "props": {
_10      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
_10      "maxHeight": 24
_10    }
_10  },

Props

Prop name	Type	Description	Default value
`alt`	`string`	Alternate text for the image.	-
`link`	`Link`	The image hyperlink. For more details on the props of the `link`, please see the following table.	-
`maxHeight`	`string`	Maximum height of the image.	-
`maxWidth`	`string`	Maximum width of the image.	-
`sizes`	`string`	Different image sizes for each page layout.	-
`src`	`string`	Source URL of the image.	-
`srcSet`	`string`	URL of the image to use in different situations.	-
`title`	`string`	Image title displayed on hover.	-

link props:

Prop name	Type	Description	Default value
`attributeNofollow`	`boolean`	Guides the search engine not to track the link of the page indicated by the tag. If `true`, sets the `rel=noFollow` attribute to the link.	`false`
`newTab`	`boolean`	If `true` opens a new tab when you click the image.	`false`
`url`	`string`	Sets the URL to which the user will be redirected by clicking the image.	-

Customization

To apply CSS customizations to this and other blocks, please read the Using CSS handles for store customization guide.

CSS Handles
`imageElement`

Props.css-8l1hzi{min-width:16px;min-height:16px;width:16px;height:16px;}

Customization

Props