Image

The image block renders images in the storefront.

Configuration

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

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

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

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

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 refer to the following table.	-
`maxHeight`	`string`	Max height of the image.	-
`maxWidth`	`string`	Max 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	-

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 `rel=noFollow` attribute to the link.	`false`
`newTab`	`boolean`	If `true` opens a new tab when you click on the image.	`false`
`url`	`string`	Sets the URL to which the user will be redirected by clicking on the image.	-

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
`imageElement`