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