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

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

 更新時間：2023年04月11日 09:01:12   作者：Lvan的前端筆記  
在最近新起的項目中,用到了較新的技術棧vue3.2+vite+ts,跟著網(wǎng)上的寫法漸漸上手了,下面這篇文章主要給大家介紹了關于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 沒有，不知道是不是我哪里操作不對。

結尾

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

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

相關文章

最新評論