If you want to show a storyblok asset from storyblok CDN it's recommend to use <SbImage /> . For all other use cases (local image or image from remote source) <NjImage /> can be used.


Display images by url

<NjImage src="https://myimage.jpg" :classes="{ picture: 'aspect-w-16 aspect-h-9' }" />

Show images from Storyblok CDN

<SbImage :src="https://myimage.jpg" :classes="{aspectRatio: 'aspect-ratio-16/9', image:'object-cover' }" />
<SbImage :src="https://myimage.jpg" :classes="{picture: 'aspect-ratio-16/9', image:'object-cover' }" />

Resize image

  :resize="{ width: '398', height: '409' }"

Aspect Ratio

To support aspect Ratios you need to add tailwindcss-aspect-ratio plugin.

# Using npm
npm install --dev @tailwindcss/aspect-ratio

# Using Yarn
yarn add -D @tailwindcss/aspect-ratio
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  plugins: [
    // ...

aspectRatio 4/3

    :classes="{ picture: 'aspect-w-4 aspect-h-3', image: 'object-cover object-center' }" 

aspectRatio 16/9


You can read more on Storyblok Image transformations in the following blog posts:

Component Api



Prop Default Description
`src` `null` `String | Object`
Add a single image url or an object which contains `alt`, `opt` and `webp`
`disableLazyLoad` `false` `Boolean`
Disable lazyloading images: Requires `lazysizes` library. (shipped with nujek)
`caption` `''` `String`
Add a custom caption text
`copyright` `''` `String`
Adds an optional © copyright info
`usePlaceholder` `true` `Boolean`
If no image is given a placeholder image will be shown. Use `placeholderImage` prop to set a placeholder.
`placeholderImage` `''` `String`
The placeholder image (URL) which will be shown if no image is set.

Classes and variants format

Property Description
Wrapper and html figure element
Deprecated: Until v2.0.29 it was used to customize the aspectRatio div
The <img> tag you can style
  classes: {
      aspectRatio: '',
      image: 'object-cover'


Slot Slot Props/Scoped Slots Description
Binds `caption` and `copyright` props. Replace template for copyright and captions.
Replace bottom placeholder

Theme Configuration

The following example will hide the Burger Button on default for smaller screens

import { NjImage } from '~nujek-ui/components'

const settings = {
  NjImage: {
    component: NjImage,
    props: {
      classes: {

      variants: {


Vue.use(Nujek, settings)



Prop Default Description
`src` `null` `String | Object`
In contrast to `<NjImage>` only object type is allowed for image src
`disableLazyLoad` `false` `Boolean`
`srcSets` `''` ``
Add a custom caption text
`quality` `''` ``
`resize` `true` `Boolean`
`facialDetection` `''` `String`
`fitIn` `''` `String`

See <NjImage /> for inherited props.

Classes and variants format

Same as NjImage


Same as NjImage

Deprecated Syntax

Before tailwind has officially supported aspect-ratios we used our own aspect ratio implementation. Earlier you had to the following to make aspect-ratios working

  • add nujek-ui.css to the project for image styles.
  • add tailwind-aspect-ratio.js plugin to tailwind.config.js
If you plan to use any aspect-ratio- classes you need to get sure that tailwind aspect-ratio plugin is installed.

If you use aspect ratios nujek adds a figure.has-aspect-ratio class which works with nujek-ui.css styles. So we recommend to add these styles. Read here to add them to your project
<NjImage src="https://myimage.jpg" :classes="{aspectRatio: 'aspect-ratio-16/9'}" />
<NjImage src="https://myimage.jpg" :classes="{aspectRatio: 'aspect-ratio-4/3'}" />
<SbImage :src="https://myimage.jpg" :classes="{aspectRatio: 'aspect-ratio-16/9', image:'object-cover' }" />