https://github.com/imgeng/imageengine-vue
Unlock the power of ImageEngine in Vue.js
https://github.com/imgeng/imageengine-vue
Last synced: 3 months ago
JSON representation
Unlock the power of ImageEngine in Vue.js
- Host: GitHub
- URL: https://github.com/imgeng/imageengine-vue
- Owner: imgeng
- Created: 2021-05-28T12:42:33.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T14:59:34.000Z (over 1 year ago)
- Last Synced: 2025-02-12T19:39:00.738Z (4 months ago)
- Language: Vue
- Size: 271 KB
- Stars: 1
- Watchers: 6
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue components for ImageEngine integration
Hassle-free way to deliver optimized responsive images in your Vue applications.
## Quick start
The bundle includes three major components:
* ``
* ``
* ``
The only prerequisite to start using them is placing `ImageEngineProvider` somewhere above in the DOM tree with the `deliveryAddress` prop set to your [ImageEngine Delivery Address](https://support.imageengine.io/hc/en-us/articles/360059238371-Quick-Start) :
```vue
import {Image, Source, ImageEngineProvider} from "@imageengine/vue";
export default {
components: {
ImageComponent: Image,
SourceComponent: Source,
ImageEngineProvider,
},
};
```
```vue
import {Image, ImageEngineProvider} from "@imageengine/vue";
export default {
components: {
ImageComponent: Image,
ImageEngineProvider
},
};
```
[Demo app on CodeSandbox](https://codesandbox.io/s/charming-yonath-9j1cb)
## Component props reference
### ImageEngineProvider
`deliveryAddress` - [ImageEngine Delivery Address](https://support.imageengine.io/hc/en-us/articles/360059238371-Quick-Start):
```ts
deliveryAddress: string
```
`stripFromSrc` - Strip away a portion of a source string in all ImageEngine's components. Particularly useful if your images are coming from a headless CMS and you need to erase something in received URL path (origin, for example):
```ts
stripFromSrc?: string
```
### Image
`src` - Relative path to the image:
```ts
src: string
```
`directives` - ImageEngine directives:
```ts
directives?: {
// Define desired width.
width?: number
// Set width to auto (with fallback).
autoWidthWithFallback?: number
// Define desired height.
height?: number
// Adjust compression.
// Possible range: 0-100.
compression?: number
// Define desired output format.
outputFormat?:
| "png"
| "gif"
| "jpg"
| "bmp"
| "webp"
| "jp2"
| "svg"
| "mp4"
| "jxr"
// Define desired fit method.
fitMethod?: "stretch" | "box" | "letterbox" | "cropbox"
// Don't apply any optimizations to the origin image.
noOptimization?: true
// Adjust sharpness.
// Possible range: 0-100.
sharpness?: number
// Define rotation.
// Possible range: -360 to 360.
rotate?: number
// Use WURFL to calculate screen's width and then scale the image accordingly.
// Possible range: 0-100 (float).
scaleToScreenWidth?: number
// Crop the image [width, height, left, top].
crop?: number[]
// Convert the image into a data url.
inline?: true
// Keep EXIF data.
keepMeta?: true
}
```
`srcSet` - List of image variations for the image source set:
```ts
srcSet?: [{
// Relative path to the image.
src: string
// Width descriptor.
width: string
// Custom optimization instructions.
directives?: TDirectives
}]
```
`attributes` - List of additional attributes:
```ts
attributes?: [{
// regular attribute
alt: string
// ...
}]
```
### Source
`srcSet` - List of image variations for the image source set:
```ts
srcSet?: [{
// Relative path to the image.
src: string
// Width descriptor.
width: string
directives?: TDirectives
}]
```
`attributes` - List of additional attributes:
```ts
attributes?: [{
// regular attribute, ex. media: '(max-width: 950px)',
// ...
}]
```