semaphore/routes/_components/LazyImage.html

<div class="lazy-image" style={computedStyle} >
  <img
    class={className}
    aria-hidden={ariaHidden}
    {alt}
    {title}
    {width}
    {height}
    src={displaySrc}
    ref:node
  />
</div>
<style>
  .lazy-image {
    overflow: hidden;
  }
</style>
<script>
  import { mark, stop } from '../_utils/marks'
  import { decodeImage } from '../_utils/decodeImage'

  export default {
    async oncreate () {
      mark('LazyImage oncreate()')
      try {
        await decodeImage(this.refs.node)
      } catch (e) {
        this.set({ error: true })
      }
      stop('LazyImage oncreate()')
    },
    data: () => ({
      error: false,
      fallback: void 0,
      background: '',
      width: void 0,
      height: void 0,
      className: '',
      ariaHidden: '',
      alt: '',
      title: ''
    }),
    computed: {
      computedStyle: ({ width, height, background }) => {
        return [
          width && `width: ${width}px;`,
          height && `height: ${height}px;`,
          background && `background: ${background};`
        ].filter(Boolean).join('')
      },
      displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
    }
  }
</script>