vue3如何加載本地圖片等靜態(tài)資源淺析
背景
在我們用 vue2 + webpack 的時(shí)候，加載圖片資源是這樣用的：
<img :src="require('@/assets/test.png')" />這樣打包后就會(huì)觸發(fā) file-loader 打包圖片資源，在 dist 文件夾中就可以看到這個(gè)圖片（如果圖片較小會(huì)打包進(jìn)代碼中變?yōu)?base64 引入）。
但是在 vue3 + vite 中，使用這種方式是不行的，vite 中沒有 require 會(huì)報(bào)錯(cuò)。
解決方案 官方文檔 中提到了兩種方案，今天我來(lái)驗(yàn)證一下。
將資源引入為 URL
import chatHealth from '@/assets/chat-health.png' <img :src="chatHealth" alt="" />
可以看到，由于這張圖片較小被打包成為了 base64，所以 dist 文件夾沒有輸出這個(gè)圖片。
接下來(lái)我拿一張大圖試驗(yàn)一下，發(fā)現(xiàn)確實(shí)打包出來(lái)了。
所以這種方法親測(cè)有效。
new URL(url, import.meta.url)
第二種方法是：
<img :src="getImgUrl('chat-health.png')" alt="" />
const getImgUrl = (name: string) => {
return new URL('../../../../../assets/' + name, import.meta.url).href
}
使用這種方法，在本地運(yùn)行的時(shí)候可以加載出來(lái)圖片。
但是發(fā)到真實(shí)環(huán)境（測(cè)試/線上），發(fā)現(xiàn)找不到文件了，我看了下目錄指向的是：
但這個(gè)路徑并不對(duì)，然后我再看打包后的文件
發(fā)現(xiàn)打包后的文件并沒有這個(gè)圖片，這里我有點(diǎn)不太懂問題出在哪里？
感覺好像就是 vite 沒有去加載這個(gè)圖片，所以打包文件看不到，并不是因?yàn)閳D片小，我換了一個(gè)大圖依舊 dist 沒有，不知道是不是我哪里操作不對(duì)。
結(jié)尾
對(duì)比這兩種方案，我只試驗(yàn)成功了第一種，第二種如果是我哪里操作不對(duì)的歡迎指正
到此這篇關(guān)于vue3如何加載本地圖片等靜態(tài)資源的文章就介紹到這了,更多相關(guān)vue3加載本地圖片靜態(tài)資源內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue自定義組件實(shí)現(xiàn)雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Vue在原窗口與新窗口打開外部鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉(zhuǎn)外部鏈接的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法
這篇文章主要介紹了使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
在Vue的模板語(yǔ)法中,我們學(xué)了很多指令,當(dāng)然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來(lái)和大家聊聊如何使用自定義指令吧2023-10-10
element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題詳解(二十多行代碼搞定）
大家在使用element-ui的時(shí)候肯定會(huì)遇到這樣一個(gè)問題,就是在你使用級(jí)聯(lián)選擇器的回顯問題,下面這篇文章主要給大家介紹了關(guān)于element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)附件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家詳細(xì)介紹了vue+echart實(shí)現(xiàn)圓滑折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue?使用虛擬?DOM?的初衷不僅是為了性能優(yōu)化,更重要的是為了解決開發(fā)效率和靈活性的問題,下面我們就來(lái)探討一下虛擬DOM的作用與原理吧2024-12-12
vue通過(guò)krpano.js實(shí)現(xiàn)360全景圖的實(shí)例代碼
這篇文章主要介紹了vue上通過(guò)krpano.js實(shí)現(xiàn)360全景圖,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-10-10
解決vue路由發(fā)生了跳轉(zhuǎn)但是界面沒有任何反應(yīng)問題
這篇文章主要介紹了解決vue路由發(fā)生了跳轉(zhuǎn)但是界面沒有任何反應(yīng)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04