关于vue3中Vite动态引入图片require报错解决方法

在Vue2中使用动态require引入图片require

<img :src="require(`../local/zh/img/prize/aaa.png`)" alt="">

• 而在Vue3+Vite中使用require会报错(原因是require是webpack的方法,找不到对应的图片路径，需要使用下面的方式进行处理。)
• 解决方法如下： import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL。

<img :src="getImageUrl(`../local/zh/img/prize/aaa.png`)" alt="">

<script setup>
    function getImageUrl(png) {
      // return new URL(`./dir/${name}.png`, import.meta.url).href
      return new URL(png, import.meta.url).href
    }
</script>