Image by vtex

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

The Image is a VTEX block that allows to add any image in the store.

{"base64":" ","img":{"width":874,"height":500,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":135415,"url":"https://user-images.githubusercontent.com/284515/70230392-f982e780-1736-11ea-921b-e83208e80620.png"}}

Configuration

Import the vtex.store-component app to your theme's dependencies in the manifest.json;


_10  "dependencies": {
_10    "vtex.store-components": "3.x"
_10  }

Add the image block in any template from your theme. For example:


_10  "image#example": {
_10    "props": {
_10      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
_10      "maxHeight": 24
_10    }
_10  },

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	-

Customization

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`