在使用vue框架進行開發的程序中,有兩個檔案夾都可以存放我們的圖片以及樣式等等,一個是public檔案夾,一個是src下的assets檔案夾;接下來博主會從這兩個檔案夾對圖片的不同處理來進行分析:

public
如果將圖片存入public檔案夾,系統就會將原來的圖片路徑及名稱編譯為一個隨機的名字,如下:

經過編譯后的圖片會極大的減小所占記憶體,所以在網頁中直接展示的圖片或者經常隨資料庫變換而變換的圖片都應該放在public檔案夾下,這樣也可以加快網頁的運行速度,
public下的圖片用絕對路徑來訪問(比如下public下的img中有一張圖片1.jpg):
src="/img/1.jpg"
如果要訪問動態的圖片則用如下寫法:
let pic = "1.jpg"
<img :src="`/img/${pic}`">
src/assets
存入assets檔案夾下的圖片則不會被編譯處理,而是原封不動的保存在服務器中;像網頁中一些固定不變的圖片如登錄注冊以及其他各種矢量圖就應放于assets中,

存于assets中的圖片用相對路徑來訪問:
src="@/assets/img/1.jpg"(@就相當于src)
src="../assets/img/1.jpg"
如果要訪問動態的圖片則用如下寫法:
let pic = "1.jpg"
<img :src="require(`../assets/images/a/${pic}`)">
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/307337.html
標籤:其他
下一篇:Javascript 閉包
