`vite-imagetools cannot find image with id "<id>"`

What I did:

<template lang="pug">

div.flex.flex-row.overflow-hidden(data-testid="rogues-gallery")
  img(v-for="i in Array(3).fill('')" :src="`${moreImage}`").more-image.w-40.m-3.inline

</template>

<script lang="ts">
// @ts-expect-error
import image from '../img/export/man.png?h=250;500'

export default {
  computed: {
    moreImage: () => image,
  },
}
</script>

What I Wanted:

2 images, one 250px wide and the other 500px.

What I Got:

vite-imagetools cannot find image with id "99e660ff1a09e8cfe50c4085fd715e2f41d69980," this is likely an internal error is printed to the console (and also to the error overlay on the dev server).

any ideas?

[HassanZahirnia]

vite-imagetools generates a bunch of images, as this is an expensive operation it also caches those images by hash. If you do HMR (or some other funky stuff) this can happen as the rendered page and the cache get out of sync. Is this happening reproducibly? And if so can you provide a repro please?

I have the same issue and I’m using HMR (which obviously is a common thing for development these days). Is there any way around this ? This tool is really fascinating and I would like to use the multi format feature, but this error would prevent using it while developing.

[k4y4k]

I ended up just going back to Gatsby 😕.

If I come back to Vite and this plugin again in the future, I’ll reopen this issue, but for now, I’ll close it.

Thank you anyway for your time 🙏