1.0.0 • Published 2 years ago
shoutrlabs-image v1.0.0
shoutrlabs-image
Install
npm install shoutrlabs-imageGetting Started
<template>
<ShoutrImage :mediaObject="mediaObject" />
</template>
<script>
import { ShoutrImage } from 'shoutrlabs-image';
export default Vue.extend({
name: 'MyComponent',
components: {
ShoutrImage,
},
});
</script>Publish new version
- Major:
npm run release:major - Minor:
npm run release:minor - Patch:
npm run release:patch - Dev:
- Set version manually in the
version-key and therelease:dev-script inpackage.json npm run release:dev
- Set version manually in the
Props
| Name | Type | Description |
|---|---|---|
| mediaObject | object | Required. Must be shour labs MediaObject. |
| imageSizes | number | array | If array, a srcset is generated. Default: [512, 1024, 2048] |
| srcKey | string | Default: source. Set, if the the source-key in the mediaObject is different (e.g. thumbsource at video-element). |
| alignment | object | Default: cover and 50%/50% |
| loading | string | Default: lazy. Possible Values: lazy, eager, priority. |
| language | string | Default: de |
| root | Object | Default: Null. Intersection Observer’s root property. Defaults to window, if set null. |
| rootMargin | string | Default: 200px. Intersection Observer’s rootMargin property. |
| threshold | number or array of numbers | Default: 0.0. Intersection Observer’s threshold property. |
| skipAnimation | boolean | Default: false. Adds class skipAnimation to img. |
Loading
lazy: The image is lazyloaded.eager: The image is loaded immediately.priority: The image is loaded upfront by injecting apreload-linkin the document’shead. Currently this has no effect in the shoutr-system, since it is only relevant forstatically rendered sites. But maybe we’ll have this in the future. https://web.dev/preload-responsive-images/
Alignment
<template>
<ShoutrImage
:alignment="{
mode: 'cover' || 'contain' || 'original',
// only for cover or contain:
alignmentx: '50%',
alignmenty: '50%',
}"
/>
</template>