Vue-Bunny-Image

Responsive image component

Uses the image attributes srcSet and sizes to responsively display an an image from bunny.

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
npm i @teamnovu/vue-bunny-image

Setup

import BunnyImage from '@teamnovu/vue-bunny-image'

Vue.use(BunnyImage, {
  bunnyBaseUrl: "https://<your-cloud-name>.b-cdn.net",
});

Release

To release a new version, run the following command (you need to be in the teamnovu npm organization):

 npm run release

Usage

<BunnyImage src="/assets/image.jpg" />

Plugin Options

Option	Default	Required	Type	Comment
bunnyBaseUrl	null	true	String
screenSizes	default screen sizes	false	Object
placeholderTransformation	null	false	String	Named Transformation used for the placeholder transformation

Attributes

See Bunny Image Processing for details about the options.

Attribute	Default	Required	Type	Description
src	null	true	String	Relative path to image on bunny
width	auto	false	Number	Bunny Optimizer Option
height	auto	false	Number	Bunny Optimizer Option
aspect-ratio	auto	false	String	Bunny Optimizer Option
quality	85	false	Number	Bunny Optimizer Option
sharpen	false	false	Boolean	Bunny Optimizer Option
blur	0	false	Number	Bunny Optimizer Option
crop	null	false	String	Bunny Optimizer Option
crop-gravity	center	false	String	Bunny Optimizer Option
flip	false	false	Boolean	Bunny Optimizer Option
flop	false	false	Boolean	Bunny Optimizer Option
brightness	0	false	String	Bunny Optimizer Option
saturation	0	false	String	Bunny Optimizer Option
hue	0	false	String	Bunny Optimizer Option
contrast	0	false	String	Bunny Optimizer Option
optimization	none	false	String	Bunny Optimizer Option
sepia	0	false	String	Bunny Optimizer 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
aspectRatio	null	false	Number	If you set this attribute the component will ignore the placeholderDataUrl attribute and load the placeholder image from bunny 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
placeholderQuality	30	false	Number	bunny Option
placeholderWidth	300	false	Number	bunny Option

Example

<BunnyImage
  src="/assets/image.jpg"
  :aspect-ratio="1.5"
  :flip="true"
/>