Skip to content
vue component to render img and picture/source tags with rokka.io
JavaScript Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Vue component for rokka images

npm travis bundlephobia zipped bundlephobia minified coveralls

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

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>
You can’t perform that action at this time.