Load image only once in VueJS SFC using Inertiajs + Vue3 + Laravel + Vite

Question

I have a Vue3 SFC with 3 images, which I initially load as per docs:

<script setup>
...
import screenshot1 from '@/Images/Landing/Screenshots/1.png';
import screenshot2 from '@/Images/Landing/Screenshots/2.png';
import screenshot3 from '@/Images/Landing/Screenshots/3.png';
import {TabGroup, TabList, TabPanels, TabPanel, Tab} from "@headlessui/vue";
...

const images = [
    {
        title: 'Image 1',
        image: screenshot1,
    },
    {
        title: 'Image 2',
        image: screenshot2,
    },
    {
        title: 'Image 3',
        image: screenshot3,
    },
];

</script>

As noticed, I am also using Tabs from headlessui/vue. Then, in my template:

<template>
    ...
    <TabPanels>
       <TabPanel v-for="image in images" :key="image.title">
           <h1>{{ image.title }}</h1>
           <img :src="image.image" alt="" />
       </TabPanel>
    </TabPanels>
    ...
</template>

Everything is working as expected, but when I change the tab, not always but sometimes, image reloads from server (I see an XHR call in the network tab of the browser's dev tools), and the screen rapidly blinks until the corresponding image is loaded again. I need these images to be "static", i.e., loaded at the beginning once and never again, because that page blinking causes a bad user experience.

Any ideas? Thanks.