<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打包時(shí)不會(huì)打包以模板字符串包裹的圖片相對(duì)路徑，所以vite不知道此處要用哪個(gè)圖片

方法一  將靜態(tài)資源放到pbulic文件中         

方法二  通過(guò)import 逐個(gè)導(dǎo)入圖片資源

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

方法三  在函數(shù)中動(dòng)態(tài)導(dǎo)入  

const setimg = async (e)=>{
    // 動(dòng)態(tài)引入
    console.log(e);  //圖片名
  let src = await import(`../assets/image/${e}.png`);
    url.value = src.default
}

附：vue3 vite 打包優(yōu)化

Vue3和Vite的打包優(yōu)化主要包括以下幾個(gè)方面：

• 按需引入：Vue3中支持使用import { xx } from 'xx'的方式進(jìn)行按需引入，可以減少打包出來(lái)的代碼體積。

• 使用ES6模塊：Vite使用ES6模塊來(lái)打包，可以減少代碼的冗余和體積，提高性能。

• 壓縮代碼：使用UglifyJS等工具來(lái)壓縮代碼，減少代碼體積。

• 代碼分割：使用Webpack等工具進(jìn)行代碼分割，減少打包后的文件體積。

• 使用CDN：將一些常用的第三方庫(kù)通過(guò)CDN引入，可以減少打包后的文件體積，同時(shí)還可以提高網(wǎng)頁(yè)的加載速度。

• 配置緩存和預(yù)編譯：可以通過(guò)配置緩存和預(yù)編譯來(lái)提高打包速度和性能。

• 靜態(tài)資源壓縮：對(duì)于圖片、CSS、JS等靜態(tài)資源進(jìn)行壓縮，減少文件的體積，提高網(wǎng)頁(yè)的加載速度。

以上是一些常用的Vue3和Vite的打包優(yōu)化方法，可以根據(jù)具體情況進(jìn)行選擇和配置。

總結(jié) 

到此這篇關(guān)于VUE3 Vite打包后動(dòng)態(tài)圖片資源不顯示問(wèn)題解決方法的文章就介紹到這了,更多相關(guān)Vite打包后動(dòng)態(tài)圖片資源不顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！