Skip to content
Nucleus Docs

Image

<ns-image>
Overview Guidance Implementation

Overview

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

Examples

Configure

Guidance

Implementation

Placement

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

  • <ns-content>
  • <ns-product-card>
  • <ns-lockup>

Specification

Attributes

src

Property
src
Description
The URL of the image.
Type
string

background

Property
background
Description
Whether the image should be a background image.
Type
boolean
Default
false

background-size

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

alt

Property
alt
Description
The alt text of the image.
Type
string
Default

ratio

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

placeholder

Property
placeholder
Description
The placeholder of the image. (src) can be used to pace src into the placeholder.
Type
string
Default

loading

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

type

Property
type
Type
string
Default
standard

Events

NameDescription
image-loadedDispatched when the image is loaded.
image-failedDispatched when the image failed to load.

This page covers most of the ways you can use ns-image. Please reach out to us if you are unsure about a potential use. Here are some useful links to related content: