@imageengine/vue

    0.1.2 • Public • Published

    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/vue";
    
    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>

    [Demo app on CodeSandbox] - soon

    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"
      // 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:

    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)',
      // ...
    }]

    Install

    npm i @imageengine/vue

    DownloadsWeekly Downloads

    50

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    139 kB

    Total Files

    18

    Last publish

    Collaborators

    • scientia-systems
    • jonarnes
    • stevekamerman