📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.
The Image
is a VTEX block that allows to add any image in the store.
- Import the
vtex.store-component
app to your theme's dependencies in themanifest.json
;
"dependencies": {
"vtex.store-components": "3.x"
}
- Add the
image
block in any template from your theme. For example:
"image#example": {
"props": {
"src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
"maxHeight": 24
}
},
Prop name | Type | Description | Default value |
---|---|---|---|
src |
string! |
Specifies the URL of an image | - |
alt |
string |
Specifies an alternate text for an image | - |
maxWidth |
string |
Specifies the max width of an image | - |
maxHeight |
string |
Specifies the max height of an image | - |
srcset |
string |
Specifies the URL of the image to use in different situations | - |
sizes |
string |
Specifies image sizes for different page layouts | - |
title |
string |
Title to be shown on hover | - |
link |
Link |
Specifies the link the image will redirect when clicked on | - |
In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.
CSS Handles |
---|
imageElement |