第vue動(dòng)態(tài)加載本地圖片的處理方法img:src="publicPath+'images/demo.jpg'"alt=""http://√

//編譯后:

imgsrc="/foo/images/demo.jpg"alt=""

script

exportdefault:{

data(){

return{

publicPath:process.env.BASE_URL,

}

},

/script

在vue.config.js中配置publicPath路徑：

//vue.config.js

module.exports={

publicPath:'/foo/',

...

結(jié)論

靜態(tài)資源可以通過(guò)兩種方式進(jìn)行處理：

在JavaScript被導(dǎo)入或在template/CSS中通過(guò)相對(duì)路徑被引用。這類(lèi)引用會(huì)被webpack處理。

放置在public目錄下或通過(guò)絕對(duì)路徑被引用。這類(lèi)資源將會(huì)直接被拷貝，而不會(huì)經(jīng)過(guò)webpack的處理。

原理

從相對(duì)路徑導(dǎo)入

當(dāng)你在JavaScript、CSS或*.vue文件中使用相對(duì)路徑(必須以.開(kāi)頭)引用一個(gè)靜態(tài)資源時(shí)，該資源將會(huì)被包含進(jìn)入webpack的依賴(lài)圖中。

在其編譯過(guò)程中，所有諸如imgsrc="..."、background:url(...)和CSS@import的資源URL都會(huì)被解析為一個(gè)模塊依賴(lài)。

用絕對(duì)路徑引入時(shí)，路徑讀取的是public文件夾中的資源，任何放置在public文件夾的靜態(tài)資源都會(huì)被簡(jiǎn)單的復(fù)制到編譯后的目錄中，而不經(jīng)過(guò)webpack特殊處理。

當(dāng)你的應(yīng)用被部署在一個(gè)域名的根路徑上時(shí)，比如/，此時(shí)這種引入方式可以正常顯示但是如果你的應(yīng)用沒(méi)有部署在域名的根部，那么你需要為你的URL配置publicPath前綴，publicPath是部署應(yīng)用包時(shí)的基本URL，需要在vue.config.js中進(jìn)行配置。

擴(kuò)展

關(guān)于vuefile-loadervsurl-loader

如果我們希望在頁(yè)面引入圖片（包括img的src和background的url）。當(dāng)我們基于webpack進(jìn)行開(kāi)發(fā)時(shí)，引入圖片會(huì)遇到一些問(wèn)題。

其中一個(gè)就是引用路徑的問(wèn)題。拿background樣式用url引入背景圖來(lái)說(shuō)，我們都知道，webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件，因此我們樣式中的url路徑是相對(duì)入口html頁(yè)面的，而不是相對(duì)于原始css文件所在的路徑的。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問(wèn)題是用file-loader解決的，file-loader可以解析項(xiàng)目中的url引入（不僅限于css），根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件。

另外，如果圖片較多，會(huì)發(fā)很多http請(qǐng)求，會(huì)降低頁(yè)面性能。這個(gè)問(wèn)題可以通過(guò)url-loader解決。url-loader會(huì)將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問(wèn)圖片了。當(dāng)然，如果圖片較大，編碼會(huì)消耗性能。因此url-loader提供了一個(gè)limit參數(shù)，小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl，大于limit的還會(huì)使用file-loader進(jìn)行copy。

**url-loader和file-loader是什么關(guān)系呢？**簡(jiǎn)答地說(shuō)，url-loader封裝了file-loader。url-loader不依賴(lài)于file-loader，即使用url-loader時(shí)，只需要安裝url-loader即可，不需要安裝file-loader，因?yàn)閡rl-loader內(nèi)置了file-loader。通過(guò)上面的介紹，我們可以看到，url-loader工作分兩種情況：1.文件大小小于limit參數(shù)，url-loader將會(huì)把文件轉(zhuǎn)為DataURL；2.文件大小大于limit，url-loader會(huì)調(diào)用file-loader進(jìn)行處理，參數(shù)也會(huì)直接傳給file-loader。因此我們只需要安裝url-loader即可。

原文鏈接：/weizaiyes/p/7461967.html

關(guān)于backgroundurl引入圖片時(shí)

按照上面理論，如果我采用相對(duì)路徑的方式引入圖片的話(huà)，webpack會(huì)對(duì)其require處理。

background:url('./iphonexs.png')00no-rep