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 :
deliveryAddress - ImageEngine Delivery Address:`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 `
$3
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 // ... }] `
$3
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)', // ... }] ``