This page is about version 3.177.0 of the app, which is not the most recent version. The latest stable version is 3.178.0.

The image block renders images in the storefront.

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

2. Add the image block to any template you choose.
3. Then, declare the image block using the props stated in the Props table. For example:

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

To apply CSS customizations to this and other blocks, please read the Using CSS handles for store customization guide.

CSS Handles
imageElement