Vue component for rokka images

Vue 2.x component for the image processing service rokka.io

If you need a lazy version use vue-rokka-image-lazy

Demo

jsFiddle

Installation

npm i vue-rokka-image

Install the plugin

import Rokka from 'vue-rokka-image'

Vue.use(Rokka)

simple use

<rokka-img
  alt="alt"
  title="Title"
  organization="playground"
  stack="dynamic"
  hash="HASH"
  format="jpg"
  filename="image.jpg"
  :operations="[
    {
      name: 'resize',
      options: { mode: 'fill', width: 200, height: 200 }
     
    },
    { 
      name: 'crop', 
      options: { width: 200, height: 200 } 
    }
  ]"
/>

use of picture

This produces two sources because there is an array in optons and postfix.

<rokka-picture
  alt="alt"
  title="Title"
  organization="playground"
  stack="dynamic"
  hash="HASH"
  format="jpg"
  filename="image.jpg"
  :operations="[
    {
      name: 'resize',
      options: { mode: 'fill', width: 200, height: 200 }
     
    },
    { 
      name: 'crop', 
      options: { width: 200, height: 200 } 
    }
  ]"
  
>
  <rokka-source
    :media="'all'"
    :postfix="['1x', '2x']"
    :options="[
      {
        dpr: '1'
      },
      {
        dpr: '2'
      }
    ]"
  />
  <rokka-img />
</rokka-picture>