Skip to content

vue component to render img and picture/source tags with rokka.io

License

Notifications You must be signed in to change notification settings

rokka-io/vue-rokka-image

Repository files navigation

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

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>

About

vue component to render img and picture/source tags with rokka.io

Resources

License

Stars

Watchers

Forks

Packages