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 @teamnovu/vue-statamic-image

Setup

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"
/>