Как работают переходы с изображениями в Vue JS 3?

Мне не удалось применить плавный переход к изображению с помощью Vue JS 3. Переход отлично работает с текстом, но изображение просто загружается и отображается, как обычно, без применения перехода.

Я пытался создать загрузчик изображений, который будет показывать счетчик загрузки до тех пор, пока изображение не будет загружено, а затем исчезать счетчик загрузки и изображение после загрузки изображения. В настоящее время счетчик загрузки исчезает, как и ожидалось, но изображение не исчезает.

Вот что у меня есть в элементе изображения:

<script setup>
  import FadeTransition from '../transitions/fade-transition.vue';
  import { reactive } from 'vue'

  const props = defineProps({
    imgUrl: String,
    route: String
  })

  let getURL = function () {
    return new URL(props.imgUrl, import.meta.url);
  }

  let show = reactive({showing: false});
  let showImg = function () {
    show.showing = true;
  }
</script>

<template>
  <div class = "frame">
    <FadeTransition><div v-show = "!show.showing" class = "loader"></div></FadeTransition>
    <RouterLink :to = "props.route"><FadeTransition><img v-show = "show.showing" class = "image" :src = "getURL()" @load = "showImg()"/></FadeTransition></RouterLink>
  </div>
</template>

<style scoped>
  .frame {
    width: 33.3333%;
    aspect-ratio: 1/1;
    margin: 0px;
    /*inline-block leaves space for descenders (e.g: letter y or g) so space between rows is wrong*/
    display: inline-flex;
    position: relative;
    padding: 6px;
  }

  .image {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    position: absolute;
  }

  .loader {
    border: 4px solid var(--grey);
    border-top: 4px solid var(--darkGrey);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 5s linear infinite;
    position: absolute;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

и компонент FadeTransition:

<script>
</script>

<template>
  <Transition name = "fade">
    <slot></slot> 
  </Transition>
</template>

<style>
  .fade-enter-active, 
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from, 
  .fade-leave-to {
    opacity: 0;
  }
</style>

Я попытался заменить изображение на текстовый блок, который работает правильно, что привело меня к выводу, что проблема заключается в том, что переход неправильно применяется к изображению.

Как я могу заставить переход правильно применяться к изображению?