Pinafore-Web-Client-Frontend/routes/_components/LazyImage.html

<div class="lazy-image" style={computedStyle} >
  {#if displaySrc}
    <img
      class={className}
      aria-hidden={ariaHidden}
      {alt}
      {title}
      {width}
      {height}
      src={displaySrc}
    />
  {/if}
</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()')
      let { src, fallback } = this.get()
      try {
        await decodeImage(src)
        this.set({ displaySrc: src })
      } catch (e) {
        if (fallback) {
          this.set({displaySrc: fallback})
        }
      }
      stop('LazyImage oncreate()')
    },
    data: () => ({
      displaySrc: void 0,
      hidden: 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('')
      }
    }
  }
</script>