解决VUE3 Vite打包后动态图片资源不显示问题

<script setup>let url = ref('')const setimg = (item)=>{ let src = `../assets/image/${e}.png` url.value = src}</script><template>    <div v-for="item in 6">        <h1 @click="setimg(item)">{{ item }}</h1>    </div>    <img :src="url" alt="">    <img src="" alt=""></template>

原因：Vite打包时不会打包以模板字符串包裹的图片相对路径，所以vite不知道此处要用哪个图片

方法一  将静态资源放到pbulic文件中         

方法二  通过import 逐个导入图片资源

import one from '../assets/image/1.png'import two from '../assets/image/2.png'

方法三  在函数中动态导入  

const setimg = async (e)=>{    // 动态引入    console.log(e);  //图片名  let src = await import(`../assets/image/${e}.png`);    url.value = src.default}