Vite / Vue 3 : “require is not defined” when using image source as props

I also encountered this problem. I searched about this and found according to this github issue comment,

There should never be require in source code when using Vite. It’s
ESM only.

More about this on Features | Vite – Static Assets

A bit of searching lead me to this Vue 3 code sample link that worked for me

<CarouselItem v-for="(item,index) of carouselData" :key="index">
 <img :src="getImageUrl(item.img_name)" />
</CarouselItem>

setup() {
  const getImageUrl = (name) => {
        return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
    }
  return { carouselData, getImageUrl }
}