<code><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">code>

<h1 @click="setimg(item)">{ { item }}</h1>code>

</div>

<img :src="url" alt="">code>

<img src="" alt="">code>

</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

}