logo

Images

Overview

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.

Examples

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

<SbImage
  :src="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: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}

aspectRatio 4/3

imagemage
<NjImage 
    :disableLazyLoad="true" 
    :classes="{ picture: 'aspect-w-4 aspect-h-3', image: 'object-cover object-center' }" 
    src="https://pathtoimage"
/>

aspectRatio 16/9

imagemage

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

Component Api

<NjImage>

Props

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
`figure`
Wrapper and html figure element
`aspectRatio`
Deprecated: Until v2.0.29 it was used to customize the aspectRatio div
`image`
The <img> tag you can style
Defaults
{
  classes: {
      aspectRatio: '',
      image: 'object-cover'
  }
}

Slots

Slot Slot Props/Scoped Slots Description
`#content`
Binds `caption` and `copyright` props. Replace template for copyright and captions.
`#placeholder`
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)

<SbImage>

Props

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

Slots

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' }" />
Sections Navigation