Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Image
vtex.store-components
Version: 3.172.2
Latest version: 3.172.2

The image block renders images in the storefront.

Configuration

  1. 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
}

  1. Add the image block to any template you choose.
  2. 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 nameTypeDescriptionDefault value
altstringAlternate text for the image.-
linkLinkThe image hyperlink. For more details on the props of the link, please see the following table.-
maxHeightstringMaximum height of the image.-
maxWidthstringMaximum width of the image.-
sizesstringDifferent image sizes for each page layout.-
srcstringSource URL of the image.-
srcSetstringURL of the image to use in different situations.-
titlestringImage title displayed on hover.-
  • link props:
Prop nameTypeDescriptionDefault value
attributeNofollowbooleanGuides 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
newTabbooleanIf true opens a new tab when you click the image.false
urlstringSets 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
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps