DSO Component Library

# Image

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <!-- Default -->
    <img src="../../dummy/images/avatar.png" alt="Alternatieve tekst">

    <!-- Responsive -->
    <img src="../../dummy/images/avatar.png" class="img-responsive" alt="Alternatieve tekst">

    <!-- Rounded -->
    <img src="../../dummy/images/avatar.png" class="img-rounded" alt="Alternatieve tekst">

    <!-- Circle -->
    <img src="../../dummy/images/avatar.png" class="img-circle" alt="Alternatieve tekst">

    <!-- Thumbnail -->
    <img src="../../dummy/images/avatar.png" class="img-thumbnail" alt="Alternatieve tekst">

`
`

    <img src="{{path source }}"{{#if modifier }} class="{{ modifier }}"{{/if}} alt="{{ alt }}">

`
`

    /* Default */
    source: /dummy/images/avatar.png
    alt: Alternatieve tekst

    /* Responsive */
    source: /dummy/images/avatar.png
    alt: Alternatieve tekst
    modifier: img-responsive

    /* Rounded */
    source: /dummy/images/avatar.png
    alt: Alternatieve tekst
    modifier: img-rounded

    /* Circle */
    source: /dummy/images/avatar.png
    alt: Alternatieve tekst
    modifier: img-circle

    /* Thumbnail */
    source: /dummy/images/avatar.png
    alt: Alternatieve tekst
    modifier: img-thumbnail

`

- Handle: @image
- Variants (5): Default , Responsive , Rounded , Circle , Thumbnail
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\02-content\image\image.hbs
- Referenced by (5): @jumbotron, @jumbotron--button, @jumbotron--image, @jumbotron--image-button, @nieuws-artikel

Plaatst een afbeelding. Gebaseerd op de Bootstrap “Images” component

Afbeeldingen kunnen responsive-friendly worden gemaakt via het toevoegen van de .img-responsive class. Deze voegt ‘max-width 100%’, ‘height auto’ en ‘display block’ toe aan de afbeelding, zodat hij netjes met zijn parent meeschaalt.

Om afbeeldingen, die gebruik maken van .img-responsive, te centreren - gebruik .center-block in plaats van .text-center

### NOTICE: WCAG2AA.Principle1.Guideline1_1.1_1_1.G73,G74

If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.

`<img src="../../dummy/images/avatar.png" alt="Alternatieve tekst">`

### NOTICE: WCAG2AA.Principle1.Guideline1_1.1_1_1.G94.Image

Ensure that the img element's alt text serves the same purpose and presents the same information as the image.

`<img src="../../dummy/images/avatar.png" alt="Alternatieve tekst">`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Image`