Vue Photo AlbumWith PhotoSwipe
PhotoSwipe- JavaScript image gallery and lightbox
Usage
vue
<script setup lang="ts">
import { ref } from 'vue'
import { PhotoAlbum } from 'vue-photo-album'
import usePhotoSwipe from './usePhotoSwipe.ts'
import CustomPhotoSwipeAdapter from './CustomPhotoSwipeAdapter.vue'
import data from './photos.json'
const photos = ref(data)
usePhotoSwipe({ gallery: '#demo', children: 'a' })
</script>
<template>
<div>
<PhotoAlbum
id="demo"
layout="rows"
:photos="photos"
:photo-renderer="CustomPhotoSwipeAdapter"
/>
</div>
</template>vue
<script setup lang="ts">
import { computed } from 'vue'
import { type PhotoRendererMetadata } from 'vue-photo-album'
const props = defineProps<PhotoRendererMetadata>()
const largePhoto = computed(() => props.photo.srcSet?.[0] ?? props.photo)
</script>
<template>
<a
:href="largePhoto.src"
:data-pswp-width="largePhoto.width"
:data-pswp-height="largePhoto.height"
:data-pswp-srcset="imageProps.srcset"
target="_blank"
rel="noopener noreferrer"
>
<slot />
</a>
</template>ts
import {
type Ref,
type MaybeRefOrGetter,
onMounted,
onUnmounted,
ref,
watch,
toValue,
nextTick
} from 'vue'
import PhotoSwipeLightbox, { type PhotoSwipeOptions } from 'photoswipe/lightbox'
import 'photoswipe/style.css'
export type UsePhotoSwipe = {
lightbox: Ref<PhotoSwipeLightbox | undefined>
}
export const usePhotoSwipe = (
pswpOptions: MaybeRefOrGetter<PhotoSwipeOptions>
): UsePhotoSwipe => {
const lightbox = ref<PhotoSwipeLightbox>()
const init = () => {
destroy()
const options = toValue(pswpOptions ?? {})
lightbox.value = new PhotoSwipeLightbox({
pswpModule: () => import('photoswipe'),
...options
})
lightbox.value.init()
}
const destroy = () => {
if (lightbox.value !== undefined) {
lightbox.value.destroy()
lightbox.value = undefined
}
}
watch(
() => toValue(pswpOptions),
() => nextTick(init)
)
onMounted(() => {
init()
})
onUnmounted(() => {
destroy()
})
return { lightbox }
}
export default usePhotoSwipejson
[
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/1920x1321",
"key": "gKXKBY-C-Dk",
"width": 1920,
"height": 1321,
"srcSet": [
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/1080x743",
"width": 1080,
"height": 743
},
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/640x440",
"width": 640,
"height": 440
},
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/384x264",
"width": 384,
"height": 264
},
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/256x176",
"width": 256,
"height": 176
},
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/128x88",
"width": 128,
"height": 88
},
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/96x66",
"width": 96,
"height": 66
},
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/64x44",
"width": 64,
"height": 44
},
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/48x33",
"width": 48,
"height": 33
}
]
},
{
"src": "https://source.unsplash.com/75715CVEJhI/771x1080",
"key": "75715CVEJhI",
"width": 771,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/75715CVEJhI/1080x1513",
"width": 1080,
"height": 1513
},
{
"src": "https://source.unsplash.com/75715CVEJhI/640x896",
"width": 640,
"height": 896
},
{
"src": "https://source.unsplash.com/75715CVEJhI/384x538",
"width": 384,
"height": 538
},
{
"src": "https://source.unsplash.com/75715CVEJhI/256x359",
"width": 256,
"height": 359
},
{
"src": "https://source.unsplash.com/75715CVEJhI/128x179",
"width": 128,
"height": 179
},
{
"src": "https://source.unsplash.com/75715CVEJhI/96x134",
"width": 96,
"height": 134
},
{
"src": "https://source.unsplash.com/75715CVEJhI/64x90",
"width": 64,
"height": 90
},
{
"src": "https://source.unsplash.com/75715CVEJhI/48x67",
"width": 48,
"height": 67
}
]
},
{
"src": "https://source.unsplash.com/mJaD10XeD7w/810x1080",
"key": "mJaD10XeD7w",
"width": 810,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/mJaD10XeD7w/1080x1440",
"width": 1080,
"height": 1440
},
{
"src": "https://source.unsplash.com/mJaD10XeD7w/640x853",
"width": 640,
"height": 853
},
{
"src": "https://source.unsplash.com/mJaD10XeD7w/384x512",
"width": 384,
"height": 512
},
{
"src": "https://source.unsplash.com/mJaD10XeD7w/256x341",
"width": 256,
"height": 341
},
{
"src": "https://source.unsplash.com/mJaD10XeD7w/128x171",
"width": 128,
"height": 171
},
{
"src": "https://source.unsplash.com/mJaD10XeD7w/96x128",
"width": 96,
"height": 128
},
{
"src": "https://source.unsplash.com/mJaD10XeD7w/64x85",
"width": 64,
"height": 85
},
{
"src": "https://source.unsplash.com/mJaD10XeD7w/48x64",
"width": 48,
"height": 64
}
]
},
{
"src": "https://source.unsplash.com/yMSecCHsIBc/810x1080",
"key": "yMSecCHsIBc",
"width": 810,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/yMSecCHsIBc/1080x1440",
"width": 1080,
"height": 1440
},
{
"src": "https://source.unsplash.com/yMSecCHsIBc/640x853",
"width": 640,
"height": 853
},
{
"src": "https://source.unsplash.com/yMSecCHsIBc/384x512",
"width": 384,
"height": 512
},
{
"src": "https://source.unsplash.com/yMSecCHsIBc/256x341",
"width": 256,
"height": 341
},
{
"src": "https://source.unsplash.com/yMSecCHsIBc/128x171",
"width": 128,
"height": 171
},
{
"src": "https://source.unsplash.com/yMSecCHsIBc/96x128",
"width": 96,
"height": 128
},
{
"src": "https://source.unsplash.com/yMSecCHsIBc/64x85",
"width": 64,
"height": 85
},
{
"src": "https://source.unsplash.com/yMSecCHsIBc/48x64",
"width": 48,
"height": 64
}
]
},
{
"src": "https://source.unsplash.com/CEx86maLUSc/720x1080",
"key": "CEx86maLUSc",
"width": 720,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/CEx86maLUSc/1080x1620",
"width": 1080,
"height": 1620
},
{
"src": "https://source.unsplash.com/CEx86maLUSc/640x960",
"width": 640,
"height": 960
},
{
"src": "https://source.unsplash.com/CEx86maLUSc/384x576",
"width": 384,
"height": 576
},
{
"src": "https://source.unsplash.com/CEx86maLUSc/256x384",
"width": 256,
"height": 384
},
{
"src": "https://source.unsplash.com/CEx86maLUSc/128x192",
"width": 128,
"height": 192
},
{
"src": "https://source.unsplash.com/CEx86maLUSc/96x144",
"width": 96,
"height": 144
},
{
"src": "https://source.unsplash.com/CEx86maLUSc/64x96",
"width": 64,
"height": 96
},
{
"src": "https://source.unsplash.com/CEx86maLUSc/48x72",
"width": 48,
"height": 72
}
]
},
{
"src": "https://source.unsplash.com/rW-I87aPY5Y/720x1080",
"key": "rW-I87aPY5Y",
"width": 720,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/rW-I87aPY5Y/1080x1620",
"width": 1080,
"height": 1620
},
{
"src": "https://source.unsplash.com/rW-I87aPY5Y/640x960",
"width": 640,
"height": 960
},
{
"src": "https://source.unsplash.com/rW-I87aPY5Y/384x576",
"width": 384,
"height": 576
},
{
"src": "https://source.unsplash.com/rW-I87aPY5Y/256x384",
"width": 256,
"height": 384
},
{
"src": "https://source.unsplash.com/rW-I87aPY5Y/128x192",
"width": 128,
"height": 192
},
{
"src": "https://source.unsplash.com/rW-I87aPY5Y/96x144",
"width": 96,
"height": 144
},
{
"src": "https://source.unsplash.com/rW-I87aPY5Y/64x96",
"width": 64,
"height": 96
},
{
"src": "https://source.unsplash.com/rW-I87aPY5Y/48x72",
"width": 48,
"height": 72
}
]
},
{
"src": "https://source.unsplash.com/ZCHj_2lJP00/720x1080",
"key": "ZCHj_2lJP00",
"width": 720,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/ZCHj_2lJP00/1080x1620",
"width": 1080,
"height": 1620
},
{
"src": "https://source.unsplash.com/ZCHj_2lJP00/640x960",
"width": 640,
"height": 960
},
{
"src": "https://source.unsplash.com/ZCHj_2lJP00/384x576",
"width": 384,
"height": 576
},
{
"src": "https://source.unsplash.com/ZCHj_2lJP00/256x384",
"width": 256,
"height": 384
},
{
"src": "https://source.unsplash.com/ZCHj_2lJP00/128x192",
"width": 128,
"height": 192
},
{
"src": "https://source.unsplash.com/ZCHj_2lJP00/96x144",
"width": 96,
"height": 144
},
{
"src": "https://source.unsplash.com/ZCHj_2lJP00/64x96",
"width": 64,
"height": 96
},
{
"src": "https://source.unsplash.com/ZCHj_2lJP00/48x72",
"width": 48,
"height": 72
}
]
},
{
"src": "https://source.unsplash.com/p6yH8VmGqxo/1080x1080",
"key": "p6yH8VmGqxo",
"width": 1080,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/p6yH8VmGqxo/1080x1080",
"width": 1080,
"height": 1080
},
{
"src": "https://source.unsplash.com/p6yH8VmGqxo/640x640",
"width": 640,
"height": 640
},
{
"src": "https://source.unsplash.com/p6yH8VmGqxo/384x384",
"width": 384,
"height": 384
},
{
"src": "https://source.unsplash.com/p6yH8VmGqxo/256x256",
"width": 256,
"height": 256
},
{
"src": "https://source.unsplash.com/p6yH8VmGqxo/128x128",
"width": 128,
"height": 128
},
{
"src": "https://source.unsplash.com/p6yH8VmGqxo/96x96",
"width": 96,
"height": 96
},
{
"src": "https://source.unsplash.com/p6yH8VmGqxo/64x64",
"width": 64,
"height": 64
},
{
"src": "https://source.unsplash.com/p6yH8VmGqxo/48x48",
"width": 48,
"height": 48
}
]
},
{
"src": "https://source.unsplash.com/Tn8DLxwuDMA/558x1080",
"key": "Tn8DLxwuDMA",
"width": 558,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/Tn8DLxwuDMA/1080x2090",
"width": 1080,
"height": 2090
},
{
"src": "https://source.unsplash.com/Tn8DLxwuDMA/640x1239",
"width": 640,
"height": 1239
},
{
"src": "https://source.unsplash.com/Tn8DLxwuDMA/384x743",
"width": 384,
"height": 743
},
{
"src": "https://source.unsplash.com/Tn8DLxwuDMA/256x495",
"width": 256,
"height": 495
},
{
"src": "https://source.unsplash.com/Tn8DLxwuDMA/128x248",
"width": 128,
"height": 248
},
{
"src": "https://source.unsplash.com/Tn8DLxwuDMA/96x186",
"width": 96,
"height": 186
},
{
"src": "https://source.unsplash.com/Tn8DLxwuDMA/64x124",
"width": 64,
"height": 124
},
{
"src": "https://source.unsplash.com/Tn8DLxwuDMA/48x93",
"width": 48,
"height": 93
}
]
},
{
"src": "https://source.unsplash.com/LEpfefQf4rU/1920x1280",
"key": "LEpfefQf4rU",
"width": 1920,
"height": 1280,
"srcSet": [
{
"src": "https://source.unsplash.com/LEpfefQf4rU/1080x720",
"width": 1080,
"height": 720
},
{
"src": "https://source.unsplash.com/LEpfefQf4rU/640x427",
"width": 640,
"height": 427
},
{
"src": "https://source.unsplash.com/LEpfefQf4rU/384x256",
"width": 384,
"height": 256
},
{
"src": "https://source.unsplash.com/LEpfefQf4rU/256x171",
"width": 256,
"height": 171
},
{
"src": "https://source.unsplash.com/LEpfefQf4rU/128x85",
"width": 128,
"height": 85
},
{
"src": "https://source.unsplash.com/LEpfefQf4rU/96x64",
"width": 96,
"height": 64
},
{
"src": "https://source.unsplash.com/LEpfefQf4rU/64x43",
"width": 64,
"height": 43
},
{
"src": "https://source.unsplash.com/LEpfefQf4rU/48x32",
"width": 48,
"height": 32
}
]
},
{
"src": "https://source.unsplash.com/nKC772R_qog/810x1080",
"key": "nKC772R_qog",
"width": 810,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/nKC772R_qog/1080x1440",
"width": 1080,
"height": 1440
},
{
"src": "https://source.unsplash.com/nKC772R_qog/640x853",
"width": 640,
"height": 853
},
{
"src": "https://source.unsplash.com/nKC772R_qog/384x512",
"width": 384,
"height": 512
},
{
"src": "https://source.unsplash.com/nKC772R_qog/256x341",
"width": 256,
"height": 341
},
{
"src": "https://source.unsplash.com/nKC772R_qog/128x171",
"width": 128,
"height": 171
},
{
"src": "https://source.unsplash.com/nKC772R_qog/96x128",
"width": 96,
"height": 128
},
{
"src": "https://source.unsplash.com/nKC772R_qog/64x85",
"width": 64,
"height": 85
},
{
"src": "https://source.unsplash.com/nKC772R_qog/48x64",
"width": 48,
"height": 64
}
]
},
{
"src": "https://source.unsplash.com/7GX5aICb5i4/720x1080",
"key": "7GX5aICb5i4",
"width": 720,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/7GX5aICb5i4/1080x1620",
"width": 1080,
"height": 1620
},
{
"src": "https://source.unsplash.com/7GX5aICb5i4/640x960",
"width": 640,
"height": 960
},
{
"src": "https://source.unsplash.com/7GX5aICb5i4/384x576",
"width": 384,
"height": 576
},
{
"src": "https://source.unsplash.com/7GX5aICb5i4/256x384",
"width": 256,
"height": 384
},
{
"src": "https://source.unsplash.com/7GX5aICb5i4/128x192",
"width": 128,
"height": 192
},
{
"src": "https://source.unsplash.com/7GX5aICb5i4/96x144",
"width": 96,
"height": 144
},
{
"src": "https://source.unsplash.com/7GX5aICb5i4/64x96",
"width": 64,
"height": 96
},
{
"src": "https://source.unsplash.com/7GX5aICb5i4/48x72",
"width": 48,
"height": 72
}
]
},
{
"src": "https://source.unsplash.com/IuJc2qh2TcA/1080x1080",
"key": "IuJc2qh2TcA",
"width": 1080,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/IuJc2qh2TcA/1080x1080",
"width": 1080,
"height": 1080
},
{
"src": "https://source.unsplash.com/IuJc2qh2TcA/640x640",
"width": 640,
"height": 640
},
{
"src": "https://source.unsplash.com/IuJc2qh2TcA/384x384",
"width": 384,
"height": 384
},
{
"src": "https://source.unsplash.com/IuJc2qh2TcA/256x256",
"width": 256,
"height": 256
},
{
"src": "https://source.unsplash.com/IuJc2qh2TcA/128x128",
"width": 128,
"height": 128
},
{
"src": "https://source.unsplash.com/IuJc2qh2TcA/96x96",
"width": 96,
"height": 96
},
{
"src": "https://source.unsplash.com/IuJc2qh2TcA/64x64",
"width": 64,
"height": 64
},
{
"src": "https://source.unsplash.com/IuJc2qh2TcA/48x48",
"width": 48,
"height": 48
}
]
},
{
"src": "https://source.unsplash.com/NodtnCsLdTE/1920x1199",
"key": "NodtnCsLdTE",
"width": 1920,
"height": 1199,
"srcSet": [
{
"src": "https://source.unsplash.com/NodtnCsLdTE/1080x674",
"width": 1080,
"height": 674
},
{
"src": "https://source.unsplash.com/NodtnCsLdTE/640x400",
"width": 640,
"height": 400
},
{
"src": "https://source.unsplash.com/NodtnCsLdTE/384x240",
"width": 384,
"height": 240
},
{
"src": "https://source.unsplash.com/NodtnCsLdTE/256x160",
"width": 256,
"height": 160
},
{
"src": "https://source.unsplash.com/NodtnCsLdTE/128x80",
"width": 128,
"height": 80
},
{
"src": "https://source.unsplash.com/NodtnCsLdTE/96x60",
"width": 96,
"height": 60
},
{
"src": "https://source.unsplash.com/NodtnCsLdTE/64x40",
"width": 64,
"height": 40
},
{
"src": "https://source.unsplash.com/NodtnCsLdTE/48x30",
"width": 48,
"height": 30
}
]
},
{
"src": "https://source.unsplash.com/cWOzOnSoh6Q/1920x1280",
"key": "cWOzOnSoh6Q",
"width": 1920,
"height": 1280,
"srcSet": [
{
"src": "https://source.unsplash.com/cWOzOnSoh6Q/1080x720",
"width": 1080,
"height": 720
},
{
"src": "https://source.unsplash.com/cWOzOnSoh6Q/640x427",
"width": 640,
"height": 427
},
{
"src": "https://source.unsplash.com/cWOzOnSoh6Q/384x256",
"width": 384,
"height": 256
},
{
"src": "https://source.unsplash.com/cWOzOnSoh6Q/256x171",
"width": 256,
"height": 171
},
{
"src": "https://source.unsplash.com/cWOzOnSoh6Q/128x85",
"width": 128,
"height": 85
},
{
"src": "https://source.unsplash.com/cWOzOnSoh6Q/96x64",
"width": 96,
"height": 64
},
{
"src": "https://source.unsplash.com/cWOzOnSoh6Q/64x43",
"width": 64,
"height": 43
},
{
"src": "https://source.unsplash.com/cWOzOnSoh6Q/48x32",
"width": 48,
"height": 32
}
]
},
{
"src": "https://source.unsplash.com/so5nsYDOdxw/1920x1407",
"key": "so5nsYDOdxw",
"width": 1920,
"height": 1407,
"srcSet": [
{
"src": "https://source.unsplash.com/so5nsYDOdxw/1080x791",
"width": 1080,
"height": 791
},
{
"src": "https://source.unsplash.com/so5nsYDOdxw/640x469",
"width": 640,
"height": 469
},
{
"src": "https://source.unsplash.com/so5nsYDOdxw/384x281",
"width": 384,
"height": 281
},
{
"src": "https://source.unsplash.com/so5nsYDOdxw/256x188",
"width": 256,
"height": 188
},
{
"src": "https://source.unsplash.com/so5nsYDOdxw/128x94",
"width": 128,
"height": 94
},
{
"src": "https://source.unsplash.com/so5nsYDOdxw/96x70",
"width": 96,
"height": 70
},
{
"src": "https://source.unsplash.com/so5nsYDOdxw/64x47",
"width": 64,
"height": 47
},
{
"src": "https://source.unsplash.com/so5nsYDOdxw/48x35",
"width": 48,
"height": 35
}
]
},
{
"src": "https://source.unsplash.com/9UUoGaaHtNE/1920x1280",
"key": "9UUoGaaHtNE",
"width": 1920,
"height": 1280,
"srcSet": [
{
"src": "https://source.unsplash.com/9UUoGaaHtNE/1080x720",
"width": 1080,
"height": 720
},
{
"src": "https://source.unsplash.com/9UUoGaaHtNE/640x427",
"width": 640,
"height": 427
},
{
"src": "https://source.unsplash.com/9UUoGaaHtNE/384x256",
"width": 384,
"height": 256
},
{
"src": "https://source.unsplash.com/9UUoGaaHtNE/256x171",
"width": 256,
"height": 171
},
{
"src": "https://source.unsplash.com/9UUoGaaHtNE/128x85",
"width": 128,
"height": 85
},
{
"src": "https://source.unsplash.com/9UUoGaaHtNE/96x64",
"width": 96,
"height": 64
},
{
"src": "https://source.unsplash.com/9UUoGaaHtNE/64x43",
"width": 64,
"height": 43
},
{
"src": "https://source.unsplash.com/9UUoGaaHtNE/48x32",
"width": 48,
"height": 32
}
]
},
{
"src": "https://source.unsplash.com/7AIDE8PrvA0/863x1080",
"key": "7AIDE8PrvA0",
"width": 863,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/7AIDE8PrvA0/1080x1352",
"width": 1080,
"height": 1352
},
{
"src": "https://source.unsplash.com/7AIDE8PrvA0/640x801",
"width": 640,
"height": 801
},
{
"src": "https://source.unsplash.com/7AIDE8PrvA0/384x481",
"width": 384,
"height": 481
},
{
"src": "https://source.unsplash.com/7AIDE8PrvA0/256x320",
"width": 256,
"height": 320
},
{
"src": "https://source.unsplash.com/7AIDE8PrvA0/128x160",
"width": 128,
"height": 160
},
{
"src": "https://source.unsplash.com/7AIDE8PrvA0/96x120",
"width": 96,
"height": 120
},
{
"src": "https://source.unsplash.com/7AIDE8PrvA0/64x80",
"width": 64,
"height": 80
},
{
"src": "https://source.unsplash.com/7AIDE8PrvA0/48x60",
"width": 48,
"height": 60
}
]
},
{
"src": "https://source.unsplash.com/BLW_KQ0Rkn0/719x1080",
"key": "BLW_KQ0Rkn0",
"width": 719,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/BLW_KQ0Rkn0/1080x1622",
"width": 1080,
"height": 1622
},
{
"src": "https://source.unsplash.com/BLW_KQ0Rkn0/640x961",
"width": 640,
"height": 961
},
{
"src": "https://source.unsplash.com/BLW_KQ0Rkn0/384x577",
"width": 384,
"height": 577
},
{
"src": "https://source.unsplash.com/BLW_KQ0Rkn0/256x385",
"width": 256,
"height": 385
},
{
"src": "https://source.unsplash.com/BLW_KQ0Rkn0/128x192",
"width": 128,
"height": 192
},
{
"src": "https://source.unsplash.com/BLW_KQ0Rkn0/96x144",
"width": 96,
"height": 144
},
{
"src": "https://source.unsplash.com/BLW_KQ0Rkn0/64x96",
"width": 64,
"height": 96
},
{
"src": "https://source.unsplash.com/BLW_KQ0Rkn0/48x72",
"width": 48,
"height": 72
}
]
},
{
"src": "https://source.unsplash.com/13ky5Ycf0ts/720x1080",
"key": "13ky5Ycf0ts",
"width": 720,
"height": 1080,
"srcSet": [
{
"src": "https://source.unsplash.com/13ky5Ycf0ts/1080x1620",
"width": 1080,
"height": 1620
},
{
"src": "https://source.unsplash.com/13ky5Ycf0ts/640x960",
"width": 640,
"height": 960
},
{
"src": "https://source.unsplash.com/13ky5Ycf0ts/384x576",
"width": 384,
"height": 576
},
{
"src": "https://source.unsplash.com/13ky5Ycf0ts/256x384",
"width": 256,
"height": 384
},
{
"src": "https://source.unsplash.com/13ky5Ycf0ts/128x192",
"width": 128,
"height": 192
},
{
"src": "https://source.unsplash.com/13ky5Ycf0ts/96x144",
"width": 96,
"height": 144
},
{
"src": "https://source.unsplash.com/13ky5Ycf0ts/64x96",
"width": 64,
"height": 96
},
{
"src": "https://source.unsplash.com/13ky5Ycf0ts/48x72",
"width": 48,
"height": 72
}
]
}
]Example
StackBlitz