vue-rokka-image example

by chregu

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-rokka-image@0.5.0"></script>
<div id="app">
  <div>
    As <code>img</code>
  </div>
  <div>
    <rokka-img 
      organization="gallery-demo" 
      hash="7ac62a" 
      :operations="[{name: 'resize', options: {width: 200}}]" 
      :options="[{autoformat:1}, {autoformat:1, dpr: 2}]" 
      :postfix="['1x', '2x']"
      >
    </rokka-img>
  </div>
  <div>
    As <code>picture</code>
  </div>
  <div>
    <rokka-picture
      organization="gallery-demo" 
      hash="7ac62a" 
      :operations="[{name: 'resize', options: {width: 200}}]" 
      :options="[{autoformat:1}, {autoformat:1, dpr: 2}]" 
      :postfix="['1x', '2x']"
      >
      <rokka-source
        media="(max-width: 500px)"
       :operations="[{name: 'resize', options: {width: 200}}, {name: 'grayscale'}]"         
      ></rokka-source>
      <rokka-img></rokka-img>

    </rokka-picture>
  <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>
</div>

JavaScript

new Vue({
  el: '#app',
  components: {
   ...vueRokkaImage

  },
  data: {}
})