vue-rokka-image
v0.5.1
Published
Vue 2.x component for the image processing service rokka.io
Downloads
127
Readme
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
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>