📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Image

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

image

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the image block in any template from your theme. For example:
  "image#example": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
      "maxHeight": 24
    }
  },
Prop nameTypeDescriptionDefault value
srcstring!Specifies the URL of an image-
altstringSpecifies an alternate text for an image-
maxWidthstringSpecifies the max width of an image-
maxHeightstringSpecifies the max height of an image-
srcsetstringSpecifies the URL of the image to use in different situations-
sizesstringSpecifies image sizes for different page layouts-
titlestringTitle to be shown on hover-
linkLinkSpecifies 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