Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-15 06:35:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Lazy load card images

Browse source
This commit is contained in:
Sam Carlton 2020-12-27 10:53:40 -06:00
parent 9019556009
commit 7cf5d488e5
1 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components/video/card.vue
View file

@ -8,13 +8,18 @@
<div class="video-card-container relative overflow-hidden bg-black">
<div class="video-card-image ratio-wrapper">
<div class="relative overflow-hidden w-full pb-16/9">
<img
:srcset="thumbnailSrcset"
:sizes="thumbnailSizes"
:src="video.thumbnails.default.url"
:alt="video.name"
class="absolute h-full w-full object-cover"
>
<picture>
<source
:sizes="thumbnailSizes"
:data-srcset="thumbnailSrcset"
type="image/jpg"
>
<img
:data-src="video.thumbnails.default.url"
:alt="video.name"
class="lazyload absolute h-full w-full object-cover"
>
</picture>
</div>
</div>
<div
@ -57,6 +62,8 @@
<script>
import 'lazysizes'
// import { getVideoEndpoint } from '~/helpers/app-derived.js'
export default {