Imagev3

Image allows a single image asset to be displayed on the page. Images are adaptive; the relevant image width is selected for the screen size and lazy loading is available.

Examples

Standard

Simple image with an asset referenced from DAM and no other configuration. By default, metadata for the asset (alternative text and caption) is read from DAM but can also be provided by an author.

Lava flowing into the ocean
  1. fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
  2. displayPopupTitle: true
  3. titleValueFromDAM: true
  4. sling:resourceType: core-components-examples/components/image
  5. isDecorative: false
  6. altValueFromDAM: true
    
        

    
Lava flowing into the ocean

Caption

Captions are displayed by default in a pop-up on hover but the image can also be configured so that the caption is displayed directly on the page.

Lava flowing into the ocean Lava flowing into the ocean
  1. fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
  2. displayPopupTitle: false
  3. titleValueFromDAM: true
  4. sling:resourceType: core-components-examples/components/image
  5. isDecorative: false
  6. altValueFromDAM: true
    
        

    
Lava flowing into the ocean Lava flowing into the ocean

Linked

Images can be linked to internal relative AEM resources or to external absolute URLs.

  1. fileReference: /content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg
  2. linkURL: /content/core-components-examples/library/core-content/image
  3. displayPopupTitle: true
  4. titleValueFromDAM: true
  5. sling:resourceType: core-components-examples/components/image
  6. isDecorative: false
  7. altValueFromDAM: true

SVG and GIF Images

SVG and GIF image MIME types are supported.

Component
  1. fileReference: /content/dam/core-components-examples/library/components/component.svg
  2. displayPopupTitle: true
  3. titleValueFromDAM: true
  4. sling:resourceType: core-components-examples/components/image
  5. isDecorative: false
  6. altValueFromDAM: true
    
        

    
Component

Empty Image

An empty image component renders the featured image defined for the page.

Lava flowing into the ocean
  1. sling:resourceType: core-components-examples/components/image
    
        

    
Lava flowing into the ocean