Image

Overview

Component that can be used to display images in a consistent and structured way.

✨ This is an auto-generated AI summary of the ns-image's documentation. It may not be accurate. ✨

British Gas has a variety of images to enhance content on the website and help sell a story. This component enables image use on the website at the correct ratios while ensuring the page loads quickly (utilising lazy loading).

Examples

Configure

Guidance

Implementation

Placement

The ns-image component can be used in the following components:

Specification

Attributes

`src`

Property: src
Description: The link of the image.
Type: string

`background`

Property: background
Description: The toggle to indicate the image needs to be added as decorative background.
Type: boolean
Default: false

`background-size`

Property: backgroundSize
Description: The background size of the image.
Type: string
Default: cover

`alt`

Property: alt
Description: The alternate text of the image and needs to be related to the visual content in the image. This is required for non decorative images.
Type: string
Default

`ratio`

Property: ratio
Description: The aspect ratio of the image.
Type: string
Options: 16 / 9 4 / 3 1 / 1
Default

`placeholder`

Property: placeholder
Description: The placeholder image to be displayed while the specified image in `src` is loading. `(src)` can be used to place src into the placeholder.
Type: string
Default

`loading`

Property: loading
Description: The loading strategy of the image.
Type: string
Options: eager lazy
Default: lazy

`type`

Property: type
Type: string
Default: standard

Events

Name	Description
`image-loaded`	Dispatched when the image is loaded.
`image-failed`	Dispatched when the image failed to load.

Last updated: Mar 27, 2024