vue-rokka-image-lazy example

by chregu

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-rokka-image-lazy@0.4.1"></script>
<div id="app">
  <rokka-img-lazy
    organization="gallery-demo"
    hash="7ac62a"
    :operations="[{name: 'resize', options: {width: 300}}]"
    :options="[{autoformat: 1}, {autoformat: 1, dpr: 2}]"
    :postfix="['1x', '2x']"
    loading="https://rokka.io/gallery/assets/loader.svg"
  > 
  </rokka-img-lazy>
  <div>
  <div>
    Photo by <a href="https://unsplash.com/@dbeltwrites">Dustin Belt</a> on <a href="https://unsplash.com/photos/iYC4SXaANJc">Unsplash</a></div>
  </div>
</div>

JavaScript

new Vue({
  el: '#app',
  components: { RokkaImgLazy: vueRokkaImageLazy.RokkaImgLazy },
  data: {
    message: ' Hello vue-rokka-image-lazy'
  }
})