1.0.5 • Published 3 months ago
@teamnovu/vue-bunny-image v1.0.5
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-imageSetup
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 releaseUsage
<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"
/>