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

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

 <img :src="getdiimg1()" alt="" class="cardimg" />
const getdiimg1 = () => {// return `/src/assets/imgs/card${state.tabIndex}.png`; 图片文件放在assets 不生效 return `/card${state.tabIndex}.png`; // 把图片移到public文件下
};