1.0.15 • Published 3 years ago
vue-statamic-image v1.0.15
Vue-Statamic-Image
Responsive image component
Uses the image attributes srcSet and sizes to responsively display an an image from statamic.
Generates srcSet with a placeholder for lazyloading based on screen sizes passed in options and adjusts the sizes attribute depending on the screen size.
Installation
npm i vue-statamic-imageSetup
Vue.use(StatamicImage, {
statamicBaseUrl: "localhost:3000",
});Usage
<StatamicImage src="/assets/image.jpg" />Plugin Options
| Option | Default | Required | Type | Comment |
|---|---|---|---|---|
| statamicBaseUrl | null | true | String | |
| statamicGlideApiEndpoint | /api/img | false | String | If this option is not set, the image manipulation features of this component will not work |
| screenSizes | default screen sizes | false | Object |
Attributes
| Attribute | Default | Required | Type | Description | |
|---|---|---|---|---|---|
| src | null | true | String | Relative path to image from statamicAssetUrl | |
| quality | 90 | false | Number | Glide Option | |
| blur | null | false | Number | Glide Option | |
| fit | null | false | String | Glide Option | |
| crop | null | false | String | Glide Option | |
| format | null | false | String | Glide Option | |
| fallbackWidth | null | false | Number | If srcSet and sizes are not supported in the clients browser, this will be the fixed width of the image itself (not css width) | |
| aspectRatio | null | false | Number | If you set this attribute the component will ignore the placeholderDataUrl attribute and load the placeholder image from statamic because the aspect ratio would change between placeholder and the real image | |
| placeholderDataUrl | null | false | String | If this attribute is set all other placeholder options are ignored and this url is used as the placeholder source. | |
| placeholderBlur | 100 | false | Number | Glide Option | |
| placeholderQuality | 30 | false | Number | Glide Option | |
| placeholderWidth | 400 | false | Number | Glide Option | |
| usePlaceholder | true | false | Boolean | If this attribute is set to false, no placeholder will be displayed and the original image will be rendered immediately |
Example
<StatamicImage
src="/assets/image.jpg"
format="webp"
:quality="80"
placeholderDataUrl="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc"
/>