pinafore/routes/_components/NonAutoplayImg.html

<img
  class={computedClass}
  aria-hidden={ariaHidden}
  {alt}
  {title}
  {width}
  {height}
  src={displaySrc}
  on:mouseover="onMouseOver(event)"
/>
<style>
  .non-autoplay-zoom-in {
    cursor: zoom-in;
  }
  .non-autoplay-zoom-in.is-link {
    cursor: pointer;
  }
</style>
<script>
  import { mouseover } from '../_utils/events'
  import { decodeImage } from '../_utils/decodeImage'
  import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
  import { classname } from '../_utils/classname'

  export default {
    async oncreate () {
      let { staticSrc } = this.get()
      try {
        await decodeImage(staticSrc)
        this.set({ displaySrc: staticSrc })
        this.fire('imgLoad')
      } catch (e) {
        this.fire('imgLoadError', e)
      }
    },
    methods: {
      onMouseOver (mouseOver) {
        let { src, staticSrc, displaySrc } = this.get()
        if (displaySrc !== ONE_TRANSPARENT_PIXEL) {
          this.set({ displaySrc: mouseOver ? src : staticSrc })
        }
      }
    },
    events: {
      mouseover
    },
    data: () => ({
      displaySrc: ONE_TRANSPARENT_PIXEL,
      alt: '',
      title: ''
    }),
    computed: {
      computedClass: ({ className, src, staticSrc, isLink }) => (classname(
        className,
        src !== staticSrc && 'non-autoplay-zoom-in',
        isLink && 'is-link'
      ))
    }
  }
</script>