快捷導(dǎo)航

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

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

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

<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不知道此處要用哪個圖片

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

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

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

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

const setimg = async (e)=>{
    // 動態(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)化主要包括以下幾個方面：

按需引入：Vue3中支持使用import { xx } from 'xx'的方式進行按需引入，可以減少打包出來的代碼體積。
使用ES6模塊：Vite使用ES6模塊來打包，可以減少代碼的冗余和體積，提高性能。
壓縮代碼：使用UglifyJS等工具來壓縮代碼，減少代碼體積。
代碼分割：使用Webpack等工具進行代碼分割，減少打包后的文件體積。
使用CDN：將一些常用的第三方庫通過CDN引入，可以減少打包后的文件體積，同時還可以提高網(wǎng)頁的加載速度。
配置緩存和預(yù)編譯：可以通過配置緩存和預(yù)編譯來提高打包速度和性能。
靜態(tài)資源壓縮：對于圖片、CSS、JS等靜態(tài)資源進行壓縮，減少文件的體積，提高網(wǎng)頁的加載速度。

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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