pinafore/routes/_components/NonAutoplayImg.html

{#if staticSrc === src}
  <img class={className || ''}
       aria-hidden={ariaHidden}
       alt={alt || ''}
       title={alt || ''}
       {src}
       on:imgLoad
       on:imgLoadError />
{:else}
  <img class="{className || ''} non-autoplay-zoom-in {isLink ? 'is-link' : ''}"
       aria-hidden={ariaHidden}
       alt={alt || ''}
       title={alt || ''}
       src={staticSrc}
       on:imgLoad
       on:imgLoadError
       on:mouseover="onMouseOver(event)"
       ref:node />
{/if}
<style>
  .non-autoplay-zoom-in {
    cursor: zoom-in;
  }
  .non-autoplay-zoom-in.is-link {
    cursor: pointer;
  }
</style>
<script>
  import { imgLoad, imgLoadError, mouseover } from '../_utils/events'
  export default {
    methods: {
      onMouseOver (mouseOver) {
        let { src, staticSrc } = this.get()
        this.refs.node.src = mouseOver ? src : staticSrc
      }
    },
    events: {
      imgLoad,
      imgLoadError,
      mouseover
    }
  }
</script>