2018-08-23 04:00:53 +00:00
|
|
|
<div class="lazy-image" style={computedStyle} >
|
2018-08-31 23:35:26 +00:00
|
|
|
<img
|
|
|
|
class={className}
|
|
|
|
aria-hidden={ariaHidden}
|
|
|
|
{alt}
|
|
|
|
{title}
|
|
|
|
{width}
|
|
|
|
{height}
|
|
|
|
src={displaySrc}
|
|
|
|
ref:node
|
|
|
|
/>
|
2018-03-14 06:07:30 +00:00
|
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.lazy-image {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
2018-08-23 04:00:53 +00:00
|
|
|
import { decodeImage } from '../_utils/decodeImage'
|
2018-03-14 14:24:16 +00:00
|
|
|
|
2018-03-14 06:07:30 +00:00
|
|
|
export default {
|
2018-08-23 04:00:53 +00:00
|
|
|
async oncreate () {
|
|
|
|
try {
|
2018-08-31 23:35:26 +00:00
|
|
|
await decodeImage(this.refs.node)
|
2018-08-23 04:00:53 +00:00
|
|
|
} catch (e) {
|
2018-08-31 23:35:26 +00:00
|
|
|
this.set({ error: true })
|
2018-03-14 14:24:16 +00:00
|
|
|
}
|
2018-04-30 05:13:41 +00:00
|
|
|
},
|
|
|
|
data: () => ({
|
2018-08-31 23:35:26 +00:00
|
|
|
error: false,
|
2018-08-23 04:00:53 +00:00
|
|
|
fallback: void 0,
|
|
|
|
background: '',
|
|
|
|
width: void 0,
|
|
|
|
height: void 0,
|
|
|
|
className: '',
|
|
|
|
ariaHidden: '',
|
|
|
|
alt: '',
|
|
|
|
title: ''
|
|
|
|
}),
|
|
|
|
computed: {
|
2018-08-30 04:42:57 +00:00
|
|
|
computedStyle: ({ width, height, background }) => {
|
2018-08-23 04:00:53 +00:00
|
|
|
return [
|
|
|
|
width && `width: ${width}px;`,
|
|
|
|
height && `height: ${height}px;`,
|
|
|
|
background && `background: ${background};`
|
|
|
|
].filter(Boolean).join('')
|
2018-08-31 23:35:26 +00:00
|
|
|
},
|
|
|
|
displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
|
2018-08-23 04:00:53 +00:00
|
|
|
}
|
2018-03-14 06:07:30 +00:00
|
|
|
}
|
2018-12-04 07:08:38 +00:00
|
|
|
</script>
|