Image
The image
block renders images in the storefront.

Configuration
- Import the
vtex.store-components
app to your theme's dependencies in themanifest.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
}
},
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 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 | - |
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 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. | - |
Customization
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
CSS Handles |
---|
imageElement |