Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 1x 2x | <script setup lang="ts">
import type { PjResponsiveImageSource } from "./responsiveImage";
withDefaults(defineProps<{
src: string;
alt: string;
sources?: PjResponsiveImageSource[];
sizes?: string;
width?: number;
height?: number;
loading?: "eager" | "lazy";
decoding?: "sync" | "async" | "auto";
fetchPriority?: "high" | "low" | "auto";
}>(), {
sources: () => [],
decoding: "async",
});
defineEmits<{
error: [event: Event];
}>();
</script>
<template>
<picture class="pj-responsive-image">
<source
v-for="source in sources"
:key="source.type"
:type="source.type"
:srcset="source.srcset"
:sizes="sizes"
/>
<img
class="pj-responsive-image__image"
:src="src"
:alt="alt"
:sizes="sizes"
:width="width"
:height="height"
:loading="loading"
:decoding="decoding"
:fetchpriority="fetchPriority"
@error="$emit('error', $event)"
/>
</picture>
</template>
<style scoped>
.pj-responsive-image,
.pj-responsive-image__image {
display: block;
width: 100%;
height: 100%;
}
</style>
|