SpeedkitImage
The SpeedkitImage
is a img
implementation based on the module @nuxt/image
.
It uses the provided API $img
.
Features
With the current implementation of SpeedkitImage
we can cover the following functionality:
Usage
The SpeedkitImage
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.
SpeedkitImage
do not disable
@nuxt/image
via
disableNuxtImage
.
Example
<template>
<div>
<speedkit-image v-bind="image" @load="onLoadImage" />
</div>
</template>
<script>
import SpeedkitImage from 'nuxt-speedkit/components/SpeedkitImage';
export default {
components: { SpeedkitImage },
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
{
source: { … },
title: 'Image Title',
alt: 'Image Alt',
loadingSpinner: new LoadingSpinner( … ),
}
hydrate
- Type:
Boolean
- Default:
true
- Default:
The initialization of the SpeedkitImage
in the client can be controlled manually.
Here for the property hydrate
must be set externally.
If true
the SpeedkitImage
is initialized.
source
- Type:
Object
{
format: '<output-format>',
src: '<file-path|url>',
sizes: { … },
modifiers: { … },
preset: { … },
provider: '<provider>'
}
format
Sets the image output format.
Available formats:
avif
webp
png
jpg
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
.
[
{ 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
- Type:
LoadingSpinner
- Default:
this.$speedkit.loader()
- Default:
Sets a loading spinner definition of type LoadingSpinner
, this describes the visual appearance of the loading state.
alt
- Type:
String
Image alternative Text.
title
- Type:
String
Image Title.
crossorigin
- Type:
String
,Boolean
If not set, the global crossorigin is used this.$speedkit.crossorigin
.
Learn more about crossorigin
option
MDN - HTML.Attributes.crossorigin
critical
- Type:
Boolean
- Default:
$parent.isCritical
- Default:
Set component as critical component.
Learn more about critical components
Events
<speedkit-image
@load="console.log('Image Loaded!')"
/>
Name | Description |
---|---|
load | Triggered when the image resource has been completely loaded. |