This page is about version 3.172.1 of the app, which is not the most recent version. The latest stable version is 3.174.0.
The image
block renders images in the storefront.
![](https://user-images.githubusercontent.com/60782333/197802548-bc9940ae-b9c8-47df-9769-e76155b9219b.png)
Configuration
- Import the
vtex.store-components
app to your theme dependencies in themanifest.json
file as in the following example:
_10 "dependencies": {_10 "vtex.store-components": "3.x"_10 }
- Add the
image
block to any template you choose. - 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 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. | - |
Customization
To apply CSS customizations to this and other blocks, please read the Using CSS handles for store customization guide.
CSS Handles |
---|
imageElement |