pinafore/routes/_components/LazyImage.html

<div class="lazy-image {fillFixSize ? 'fixed-size': ''}" style={computedStyle} >
  <img
    class="{fillFixSize ? 'fixed-size-img': ''}"
    aria-hidden={ariaHidden}
    {alt}
    {title}
    {width}
    {height}
    src={displaySrc}
    style={focusStyle}
    ref:node
  />
</div>
<style>
  .lazy-image {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
  }

  .fixed-size-img {
    width: 100%;
    height: 100%;
  }
  .fixed-size {
    position: absolute;
    width: 100%;
    height: 100%;
  }


</style>
<script>
  import { decodeImage } from '../_utils/decodeImage'
  import { coordsToPercent } from '../_utils/coordsToPercent'

  export default {
    async oncreate () {
      try {
        await decodeImage(this.refs.node)
      } catch (e) {
        this.set({ error: true })
      }
    },
    data: () => ({
      error: false,
      forceSize: false,
      fallback: void 0,
      focus: void 0,
      background: '',
      width: void 0,
      height: void 0,
      ariaHidden: false,
      alt: '',
      title: ''
    }),
    computed: {
      computedStyle: ({ background }) => {
        return [
          background && `background: ${background};`
        ].filter(Boolean).join('')
      },
      focusStyle: ({ focus }) => {
        // Here we do a pure css version instead of using
        // https://github.com/jonom/jquery-focuspoint#1-calculate-your-images-focus-point

        if (!focus) return 'background-position: center;'
        return `object-position: ${coordsToPercent(focus.x)}% ${100 - coordsToPercent(focus.y)}%;`
      },
      fillFixSize: ({ forceSize, $largeInlineMedia }) => !$largeInlineMedia && !forceSize,
      displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
    }
  }
</script>