@imageengine/vue3
v0.1.1
Published
Hassle-free way to deliver optimized responsive images in your Vue applications.
Downloads
41
Keywords
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:
<ImageEngineProvider>
<Image>
<Source>
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 :
<template>
<div class="content">
<ImageEngineProvider deliveryAddress="https://blazing-fast-pics.cdn.imgeng.in">
<picture>
<SourceComponent
:srcSet="[
{
src: `/images/pic_1_variation_1.jpg`,
width: '500w',
},
{
src: `/images/pic_1_variation_2.jpg`,
width: '900w',
directives: { compression: 0 },
},
]"
:attributes="{ media: '(max-width: 950px)' }"/>
<SourceComponent
:srcSet="[
{
src: `/images/pic_1_variation_1.jpg`,
width: '500w',
},
{
src: `/images/pic_1_variation_2.jpg`,
width: '900w',
directives: { compression: 0 },
},
]"
:attributes="{
media: '(max-width: 950px)',
id: 'testid',
'data-test': 'test source attribute',
}"/>
<ImageComponent
src="/images/pic_2.jpg"
:attributes="{
alt: 'test image',
}"
:directives="{
outputFormat: 'webp',
rotate: 45,
inline: true
}"/>
</picture>
</ImageEngineProvider>
</div>
</template>
<script>
import {Image, Source, ImageEngineProvider} from "@imageengine/vue3";
export default {
components: {
ImageComponent: Image,
SourceComponent: Source,
ImageEngineProvider,
},
};
</script>
<template>
<div id="app">
<ImageEngineProvider deliveryAddress="https://blazing-fast-pics.cdn.imgeng.in">
<ImageComponent src="/images/pic_2.jpg" />
</ImageEngineProvider>
</div>
</template>
<script>
import {Image, ImageEngineProvider} from "@imageengine/vue";
export default {
components: {
ImageComponent: Image,
ImageEngineProvider
},
};
</script>
Component props reference
ImageEngineProvider
deliveryAddress
- ImageEngine Delivery Address:
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):
stripFromSrc?: string
Image
src
- Relative path to the image:
src: string
directives
- ImageEngine directives:
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"
| "avif"
| "jxl"
// Define desired fit method.
fitMethod?: "stretch" | "box" | "letterbox" | "cropbox" | "outside"
// 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
// Force download the image
force_download?: true
//Maximum DPR (Device Pixel Ratio) to consider when resizing an image.
max_device_pixel_ratio: 2.1; // 1-4 float
}
srcSet
- List of image variations for the image source set:
srcSet?: [{
// Relative path to the image.
src: string
// Width descriptor.
width: string
// Custom optimization instructions.
directives?: TDirectives
}]
attributes
- List of additional attributes:
attributes?: [{
// regular attribute
alt: string
// ...
}]
Source
srcSet
- List of image variations for the image source set:
srcSet?: [{
// Relative path to the image.
src: string
// Width descriptor.
width: string
directives?: TDirectives
}]
attributes
- List of additional attributes:
attributes?: [{
// regular attribute, ex. media: '(max-width: 950px)',
// ...
}]