解决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
}