快捷導(dǎo)航

VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問題解決方法

更新時(shí)間：2024年09月04日 10:28:00 作者：m0_56385144

這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問題的解決方法,可能是因?yàn)樵诓渴鸷蟮姆?wù)器環(huán)境中對中文文件名的支持不完善,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

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

方法二 通過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)行按需引入，可以減少打包出來的代碼體積。
使用ES6模塊：Vite使用ES6模塊來打包，可以減少代碼的冗余和體積，提高性能。
壓縮代碼：使用UglifyJS等工具來壓縮代碼，減少代碼體積。
代碼分割：使用Webpack等工具進(jìn)行代碼分割，減少打包后的文件體積。
使用CDN：將一些常用的第三方庫通過CDN引入，可以減少打包后的文件體積，同時(shí)還可以提高網(wǎng)頁的加載速度。
配置緩存和預(yù)編譯：可以通過配置緩存和預(yù)編譯來提高打包速度和性能。
靜態(tài)資源壓縮：對于圖片、CSS、JS等靜態(tài)資源進(jìn)行壓縮，減少文件的體積，提高網(wǎng)頁的加載速度。

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中jsonp跨域獲取qq音樂首頁推薦問題
這篇文章主要介紹了vue項(xiàng)目中jsonp跨域獲取qq音樂首頁推薦問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05
使用vue編寫一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲
這篇文章主要為大家詳細(xì)介紹了使用vue編寫一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
Vue 仿百度搜索功能實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了vue仿百度搜索功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-02-02
Vue 頁面監(jiān)聽用戶預(yù)覽時(shí)間功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 頁面如何監(jiān)聽用戶預(yù)覽時(shí)間,首先需要借助vue頁面的生命周期函數(shù)mounted和destroyed，分別加入開始計(jì)時(shí)和清除計(jì)時(shí)的邏輯，通過相關(guān)操作實(shí)現(xiàn)此功能，需要的朋友可以參考下
2021-07-07
Vue項(xiàng)目如何開啟gzip
這篇文章主要介紹了Vue項(xiàng)目如何開啟gzip的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-06-06
vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-07-07
vue項(xiàng)目中引入Sass實(shí)例方法
在本文里小編給大家整理的是關(guān)于vue項(xiàng)目中引入Sass的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以測試參考下。
2019-08-08
VUE注冊全局組件和局部組件過程解析
這篇文章主要介紹了VUE注冊全局組件和局部組件過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
Vue組件的Prop命名約定詳解
這篇文章主要為大家介紹了Vue組件的Prop命名約定詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
Vue手寫實(shí)現(xiàn)組件初渲染
這篇文章主要介紹了Vue手寫實(shí)現(xiàn)組件初渲染，在Vue進(jìn)行文本編譯之后，會(huì)得到代碼字符串生成的render函數(shù)，本文會(huì)基于render函數(shù)展開主題相關(guān)內(nèi)容，感興趣的朋友可以參考一下
2022-08-08