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. 

    
  2. 
        displayPopupTitle:
        true
    
    3. 

    
  3. 
        titleValueFromDAM:
        true
    
    4. 

    
  4. 
        sling:resourceType:
        core-components-examples/components/image
    
    5. 

    
  5. 
        isDecorative:
        false
    
    6. 

    
  6. 
        altValueFromDAM:
        true
    
    7. 



    
        

    



    
        Lava flowing into the ocean
    
    
    



    




    

    


    JSON

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. 

    
  2. 
        displayPopupTitle:
        false
    
    3. 

    
  3. 
        titleValueFromDAM:
        true
    
    4. 

    
  4. 
        sling:resourceType:
        core-components-examples/components/image
    
    5. 

    
  5. 
        isDecorative:
        false
    
    6. 

    
  6. 
        altValueFromDAM:
        true
    
    7. 



    
        

    



    
        Lava flowing into the ocean
    
    Lava flowing into the ocean
    



    




    

    


    JSON

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. 

    
  2. 
        linkURL:
        /content/core-components-examples/library/core-content/image
    
    3. 

    
  3. 
        displayPopupTitle:
        true
    
    4. 

    
  4. 
        titleValueFromDAM:
        true
    
    5. 

    
  5. 
        sling:resourceType:
        core-components-examples/components/image
    
    6. 

    
  6. 
        isDecorative:
        false
    
    7. 

    
  7. 
        altValueFromDAM:
        true
    
    8. 



    
        

    



    




    

    


    JSON

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. 

    
  2. 
        displayPopupTitle:
        true
    
    3. 

    
  3. 
        titleValueFromDAM:
        true
    
    4. 

    
  4. 
        sling:resourceType:
        core-components-examples/components/image
    
    5. 

    
  5. 
        isDecorative:
        false
    
    6. 

    
  6. 
        altValueFromDAM:
        true
    
    7. 



    
        

    



    
        Component
    
    
    



    




    

    


    JSON

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
    
    2. 



    
        

    



    
        Lava flowing into the ocean
    
    
    



    




    

    


    JSON

Built with Core Components 2.27.0.