43 lines
986 B
HTML
43 lines
986 B
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> |