Test

frontend/app/components/content/BlurImage.vue

@@ -0,0 +1,53 @@
+<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>