Aran Roig
dcae816cf2
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 41s
54 lines
857 B
Vue
54 lines
857 B
Vue
<template>
|
|
<div class="image-wrapper">
|
|
<img
|
|
:src="lowResSrc"
|
|
:alt="alt"
|
|
class="image-base blur-sm scale-105"
|
|
:class="{ 'opacity-0': isLoaded }"
|
|
/>
|
|
<img
|
|
:src="highResSrc"
|
|
:alt="alt"
|
|
class="image-base"
|
|
:class="{ 'opacity-0': !isLoaded }"
|
|
@load="isLoaded = true"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.image-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.image-base {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.image-base:last-child {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.blur-sm {
|
|
filter: blur(20px);
|
|
}
|
|
|
|
.opacity-0 {
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
lowResSrc: { type: String, required: true },
|
|
highResSrc: { type: String, required: true },
|
|
alt: { type: String, default: '' },
|
|
})
|
|
|
|
const isLoaded = ref(false)
|
|
</script>
|