pinafore/routes/_components/NonAutoplayImg.html

<img
  class={computedClass}
  aria-hidden={ariaHidden}
  {alt}
  {title}
  {width}
  {height}
  src={displaySrc}
  on:mouseover="onMouseOver(event)"
  ref:node
/>
<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 { classname } from '../_utils/classname'

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