Appearance

BoosterImage ​

The BoosterImage is a img implementation based on the module @nuxt/image.
It uses the provided API $img.

Features ​

With the current implementation of BoosterImage we can cover the following functionality:

  • generation of multiple image resolutions (srcset)
  • breakpoint-based differentiation of multiple image resolutions (srcset)
  • optimized preloading of critical image resources
  • lazy load of non-critical image resources
  • base path support
  • lazy hydration support
  • load and optimize remote images from custom domains
  • full SEO support

Usage ​

The BoosterImage is used to automatically generate and display different image sizes for different viewports.

The specified resources can be given by absolute path (static folder) or complete URL. nuxt/image downloads the resources fully automatically and stores the generated and optimized renditions in the destination folder.

WARNING

Important: For using BoosterImage do not disable @nuxt/image via disableNuxtImage.

Example ​

vue
<template>
  <div>
    <booster-image v-bind="image" @load="onLoadImage"  />
  </div>
</template>

<script>
import BoosterImage from '#booster/components/BoosterImage';
export default {
  components: { BoosterImage },
  data () {
    return {
      image: {
        source: { format: 'jpg', src: '/img/image.jpg', sizes: { default: '100vw', xxs: '100vw', xs: '100vw', sm: '100vw', md: '100vw', lg: '100vw', xl: '100vw', xxl: '100vw' } },
        title: 'Image Title',
        alt: 'Image Alt'
      }
    };
  },
  methods: {
    onLoadImage() {
      console.log('Image loaded!');
    }
  }
};
</script>

Properties ​

js
{
  source: { … },
  title: 'Image Title',
  alt: 'Image Alt',
  loadingSpinner: new LoadingSpinner( … ),
}

hydrate ​

  • Type: Boolean
    • Default: true

The initialization of the BoosterImage in the client can be controlled manually.
Here for the property hydrate must be set externally. If true the BoosterImage is initialized.

source ​

  • Type: Object
js
{
  format: '<output-format>', 
  src: '<file-path|url>', 
  sizes: { … }, 
  modifiers: { … }, 
  preset: { … }, 
  provider: '<provider>'
}

format ​

Sets the image output format.

Available formats:

  • avif
  • webp
  • png
  • jpg

WARNING

Important: Note that if you specify src without a file extension, the format must be included.

src ​

Information on property src can be found at here.

sizes ​

Describes the image sizes in which the resource should be displayed. The image sizes are passed as an object and describe with the key-value pairs the image width and the width of the viewport depending on it, e.g. ImageWidth:MinWidth.

The image width, is definied by screens option from @nuxt/image

Example

In the following example, one image with two different image sizes by breakpoints and output format is webp.

js
[
  { format: 'webp', src: '/img/image.jpg', sizes: { default: '100vw', sm: '100vw' } }
]

modifiers ​

  • Type: Object

You can give separate modifiers to each source. This overwrites the global ones of the preset if available.

Learn more about modifiers:

preset ​

  • Type: Object

If a preset is set on a source, the globally defined one is ignored.

This means that a separate preset can be specified for each source.

Learn more about preset:

provider ​

  • Type: String

If a provider is set on a source, the globally defined one is ignored.

This means that a separate provider can be specified for each source.

Learn more about provider:

loadingSpinner ​

Sets a loading spinner definition of type LoadingSpinner, this describes the visual appearance of the loading state.

alt ​

  • Type: String

Image alternative Text.

MDN - HTMLImageElement.alt

title ​

  • Type: String

Image Title.

MDN - HTMLElement.title

crossorigin ​

  • Type: String, Boolean

If not set, the global crossorigin is used this.$booster.crossorigin.

Learn more about crossorigin option

MDN - HTML.Attributes.crossorigin

critical ​

  • Type: Boolean
    • Default: $parent.isCritical

Set component as critical component.

Learn more about critical components

Events ​

html
<booster-image 
  @load="console.log('Image Loaded!')" 
/>
NameDescription
loadTriggered when the image resource has been completely loaded.