Image

This component gives you the more flexibility in specifying image resources. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

Import

React

// with @dhl-official/react-library:
import { DhlImage } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlImage } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-image></dhl-image>

Vue.js

// with @dhl-official/vue-library:
import { DhlImage } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlImage } from "@dhl-official/ui-libraries/vue-library"

Usage

Use the image component when you need to showcase visual files and ensure responsiveness.

Simple image component

When you do not have any responsive images and but only want to render a single image, you can use it like a normal <img/> tag

Responsive Images

Responsive images are a huge win for applications because we can encourage browsers to only download the largest image they need.

We can do this in two ways (by using one single component <Image />)

1. Using <picture/> tag with <source/> tag
2. Using <img/> tag with srcset and sizes attributes

Render <picture/> tag with <source/> tag

Code

React

<DhlImage alt="A beautiful responsive image" src="/path/to/image"></DhlImage>

Angular

<dhl-image alt="A beautiful responsive image" src="/path/to/image"></dhl-image>

Vue.js

<dhl-image alt="A beautiful responsive image" :src="/path/to/image"></dhl-image>

Interactive Demo

Migrating from DUIL 1.0

• Rename srcSet to srcset

Readme

Properties

Property	Attribute	Description	Type	Default
alt (required)	alt	A REQUIRED prop used to specify the alt text within the component.	string	undefined
aspectRatio	aspect-ratio	An optional prop that sets the aspect ratio of the component. This is overidden when height and width are set.	string	null
dataClassName	data-class-name	An optional class name prop for the component.	string	""
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
height	height	An optional prop used to define the height of the image. For more information see: https://www.w3.org/TR/2011/WD-html5-author-20110809/the-area-element.html#dimension-attributes	number	undefined
sizes	sizes	An optional sizes prop used for responsive selection of images. Defines a set of media conditions (e.g. screen width) and indicates what image size would be best to choose, when certain media conditions are true. Composed of: - A media condition ((max-width:600px)) - A space - The width of the slot the image will fill when the media condition is true (480px) For more information, see Responsive Images	string	undefined
src (required)	src	A REQUIRED prop used to specify the image source.	string	undefined
srcset	srcset	An optional srcSet prop used to define the set of images from which the browser can choose from with a corresponding image size. Image information is comma separated and is defined as follows: - Image filename - A space - An image's intrinsic width in pixels (480w) — note that this uses the w unit, not px. This refers to the image's real size.	string	undefined
width	width	An optional prop used to define the width of the image. For more information see: https://www.w3.org/TR/2011/WD-html5-author-20110809/the-area-element.html#dimension-attributes	number	undefined

Slots

Slot	Description
"unnamed"	unnamed children slot intended for <source> elements used to provide multiple versions of an image for different display/scaling scenarios

Dependencies

Used by

• dhl-footer
• dhl-select
• dhl-select-option

Graph

---

Built by DHL User Interface Library Team!