欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3如何加載本地圖片等靜態(tài)資源淺析

 更新時間：2023年04月11日 09:01:12   作者：Lvan的前端筆記  
在最近新起的項(xiàng)目中,用到了較新的技術(shù)棧vue3.2+vite+ts,跟著網(wǎng)上的寫法漸漸上手了,下面這篇文章主要給大家介紹了關(guān)于vue3如何加載本地圖片等靜態(tài)資源的相關(guān)資料,需要的朋友可以參考下

背景

在我們用 vue2 + webpack 的時候，加載圖片資源是這樣用的：

<img :src="require('@/assets/test.png')" />

這樣打包后就會觸發(fā) file-loader 打包圖片資源，在 dist 文件夾中就可以看到這個圖片（如果圖片較小會打包進(jìn)代碼中變?yōu)?base64 引入）。

但是在 vue3 + vite 中，使用這種方式是不行的，vite 中沒有 require 會報(bào)錯。
解決方案 官方文檔 中提到了兩種方案，今天我來驗(yàn)證一下。

將資源引入為 URL

import chatHealth from '@/assets/chat-health.png'
<img :src="chatHealth" alt="" />

可以看到，由于這張圖片較小被打包成為了 base64，所以 dist 文件夾沒有輸出這個圖片。

接下來我拿一張大圖試驗(yàn)一下，發(fā)現(xiàn)確實(shí)打包出來了。

所以這種方法親測有效。

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)行的時候可以加載出來圖片。

但是發(fā)到真實(shí)環(huán)境（測試/線上），發(fā)現(xiàn)找不到文件了，我看了下目錄指向的是：

但這個路徑并不對，然后我再看打包后的文件

發(fā)現(xiàn)打包后的文件并沒有這個圖片，這里我有點(diǎn)不太懂問題出在哪里？

感覺好像就是 vite 沒有去加載這個圖片，所以打包文件看不到，并不是因?yàn)閳D片小，我換了一個大圖依舊 dist 沒有，不知道是不是我哪里操作不對。

結(jié)尾

對比這兩種方案，我只試驗(yàn)成功了第一種，第二種如果是我哪里操作不對的歡迎指正

到此這篇關(guān)于vue3如何加載本地圖片等靜態(tài)資源的文章就介紹到這了,更多相關(guān)vue3加載本地圖片靜態(tài)資源內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論