Nuxt3动态绑定图片路径不生效问题

nuxt3中直接使用v-bind绑定项目中assets文件夹中的src路径会不生效，下面是一个错误示例：

<script lang="ts" setup>
const imgSrc = '~/assets/example.png'
</script>

<template>
  <img :src="imgSrc" width="200" height="200">
</template>

网上看到有一些是修改动态路径，比如路径前加上/_nuxt/，使用import引入图片等等操作，但效果都不是很理想

目前我在用的解决方案如下：

1. 先在项目中composables文件夹内新建useAssets.ts文件

// composables/useAssets.ts
export function useAssets() {
  const images = computed<Record<string, { default: string }>>(() => import.meta.glob('~/assets/**/*.(png|jpeg|svg)', { eager: true }))

  const useAssetsImage = (src: string): string | undefined => {
    for (const path in images.value) {
      const image = images.value[path].default
      if (path.endsWith(`assets/${src}`))
        return image
    }
    return undefined
  }

  return {
    useAssetsImage,
  }
}

2. 在页面中使用：

// pages/test.vue
<script lang="ts" setup>
const { useAssetsImage } = useAssets()
</script>

<template>
  <div class="imgs">
    <!-- 
        假设assets文件夹下有一个文件夹叫images
        里面有三个图片文件分别是:
        test-img-1.png
        test-img-2.png
        test-img-3.png
        …  -->
    
    <img v-for="num in 3" :key="num" :src="useAssetsImage(`images/test-img-${num}.png`)">
  </div>
</template>

如果哪位有更好的解决方案可以交流一下，另外目前我还没遇到过需要后端返回的图片路径如何处理这样的问题，如果有哪位小伙伴遇到了这样的问题也欢迎交流