Imagev2

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.

Using Core Components

Adobe Help Center

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. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
  4. jcr:lastModifiedBy: admin
  5. jcr:created:
  6. displayPopupTitle: true
  7. jcr:lastModified:
  8. titleValueFromDAM: true
  9. sling:resourceType: core/wcm/components/image/v2/image
  10. isDecorative: false
  11. 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. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
  4. jcr:lastModifiedBy: admin
  5. jcr:created:
  6. displayPopupTitle: false
  7. jcr:lastModified:
  8. titleValueFromDAM: true
  9. sling:resourceType: core/wcm/components/image/v2/image
  10. isDecorative: false
  11. 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. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. fileReference: /content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg
  4. jcr:lastModifiedBy: admin
  5. jcr:created:
  6. linkURL: /content/core-components-examples/library/image
  7. displayPopupTitle: true
  8. jcr:lastModified:
  9. titleValueFromDAM: true
  10. sling:resourceType: core/wcm/components/image/v2/image
  11. isDecorative: false
  12. altValueFromDAM: true

SVG and GIF Images

SVG and GIF image MIME types are supported.

Component
  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. fileReference: /content/dam/core-components-examples/library/components/component.svg
  4. jcr:lastModifiedBy: admin
  5. jcr:created:
  6. displayPopupTitle: true
  7. jcr:lastModified:
  8. titleValueFromDAM: true
  9. sling:resourceType: core/wcm/components/image/v2/image
  10. isDecorative: false
  11. altValueFromDAM: true
    
        

    
Component