Eu tenho um pequeno aplicativo usando Vue.Js (com webpack). Eu tenho uma seção de transição. Quando o usuário clica em um botão, o conteúdo muda. É um elemento DIV simples com um elemento filho IMG. Meu problema é que quando o usuário clica no botão, a próxima imagem é carregada em tempo real e é lenta, então, de alguma forma, eu preciso pré-carregar essas imagens.

Tentei abordagens mais diferentes, mas não consegui obter as imagens pré-carregadas. Os problemas:

Somente a primeira imagem faz parte do DOM, quando a página é exibida, para que as outras imagens não sejam carregadas. Ok, é o comportamento normal.

Não pude pré-carregar as imagens usando um loop for simples em uma matriz de imagens (Imagens de pré-carregamento de JavaScript) porque as imagens serão solicitadas por uma string de consulta exclusiva () para cada solicitação. Portanto, os nomes das imagens pré-carregadas não corresponderão aos solicitados.

Tentei carregar as imagens usando require () e vinculá-lo à propriedade scr da marca IMG. Também não foi resolvido o meu problema, as imagens serão carregadas em tempo real após o clique quando o novo DIV será inserido no DOM.

meu componente simplificado de arquivo único (.vue) é mais ou menos assim:

<template>
    <!-- [FIRST] -->
    <div v-if="contentId == 0">
      <transition
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
        mode="out-in">
        <img :src="images.firstScreenShot" key="firstImage">
      </transition>
    </div>
    <!-- [/FIRST] -->

    <!-- [SECOND] -->
    <div v-else-if="contentId == 1">
      <transition
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
        mode="out-in">

        <img :src="images.secondScreenShot" key="secondImage">
      </transition>
    </div>
    <!-- [/SECOND] -->
</template>
<script>
    export default {
        data() {
            return {
                contentId: 0,
                images: {
                    firstScreenShot: require('./assets/first-screen-shot.png'),
                    secondScreenShot: require('./assets/second-screen-shot.png'),
                }
            }
        }
    }
</script>

Sou novo no Vue.js, talvez minha abordagem não seja boa. Por favor, deixe-me saber qual é a boa abordagem!