Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Store Components
Image

The image block renders images in the storefront.

Configuration

  1. 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" }
  1. Add the image block to any template of your choice.
  2. 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 nameTypeDescriptionDefault value
altstringAlternate text for the image.-
linkLinkThe image hyperlink. For more details on the props of the link, please refer to the following table.-
maxHeightstringMax height of the image.-
maxWidthstringMax width of the image.-
sizesstringDifferent image sizes for each page layout.-
srcstring!Source 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 rel=noFollow attribute to the link.false
newTabbooleanIf true opens a new tab when you click on the image.false
urlstringSets 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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Back To Top Button
« Previous
Info Card
Next »
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page