您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue動(dòng)態(tài)加載本地圖片問題如何解決的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
今天遇到一個(gè)在vue文件中引入本地圖片的問題,于是有了這篇文章。
通常,我們的一個(gè)img標(biāo)簽在html中是這么寫的:
<img src="../images/demo.png">
這種寫法只能引用相對(duì)路徑下的圖片。不能使用絕對(duì)路徑。使用絕對(duì)路徑的話,這類資源將會(huì)直接被拷貝,而不會(huì)經(jīng)過 webpack 的處理。
如果src是變量的話,我們一般會(huì)在data中定一個(gè)變量src進(jìn)行動(dòng)態(tài)綁定。
<img :src="src"> //data中定義變量src data() { return { src: "../images/demo.png" } }
然而這時(shí)候,會(huì)發(fā)現(xiàn)這個(gè)時(shí)候圖片并沒有被加載出來,圖片沒有顯示出來,通過查看發(fā)現(xiàn)這張圖片的地址顯示 ../images/demo.png ,也就是說通過v-bind形式綁定的相對(duì)路徑不會(huì)被webpack的file-loader處理,只會(huì)做簡(jiǎn)單的文本替換。
那怎么辦呢?
1、將圖片轉(zhuǎn)**base64**格式
<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">
一般圖片比較小的可以這么做,比如圖標(biāo)icon等,大小一般在10KB以內(nèi)的。
2、使用**import**引入圖片
<img :src="src"> //使用import引入 import img from "../images/demo.png" //data中定義變量src data() { return { src: img } }
3、使用**require**動(dòng)態(tài)加載
<img :src="src"> //data中定義變量src data() { return { src: require("../images/demo.png") } }
4、引入**publicPath**并且將其拼接在路徑中,實(shí)現(xiàn)引入路徑的動(dòng)態(tài)變動(dòng)
<img :src="publicPath + "images/demo.jpg"" alt=""> // √ // 編譯后: <img src="/foo/images/demo.jpg" alt=""> <script> export default:{ data(){ return { publicPath: process.env.BASE_URL, } }, } </script>
在vue.config.js中配置publicPath路徑:
//vue.config.js module.exports = { publicPath:"/foo/", ... }
靜態(tài)資源可以通過兩種方式進(jìn)行處理:
在 JavaScript 被導(dǎo)入或在 template/CSS 中通過相對(duì)路徑被引用。這類引用會(huì)被 webpack 處理。
放置在 public 目錄下或通過絕對(duì)路徑被引用。這類資源將會(huì)直接被拷貝,而不會(huì)經(jīng)過 webpack 的處理。
從相對(duì)路徑導(dǎo)入
當(dāng)你在 JavaScript、CSS 或 *.vue 文件中使用相對(duì)路徑 (必須以 . 開頭) 引用一個(gè)靜態(tài)資源時(shí),該資源將會(huì)被包含進(jìn)入 webpack 的依賴圖中。
在其編譯過程中,所有諸如 <img src="...">、background: url(...) 和 CSS @import 的資源 URL 都會(huì)被解析為一個(gè)模塊依賴。
用絕對(duì)路徑引入時(shí),路徑讀取的是public文件夾中的資源,任何放置在 public 文件夾的靜態(tài)資源都會(huì)被簡(jiǎn)單的復(fù)制到編譯后的目錄中,而不經(jīng)過 webpack特殊處理。
當(dāng)你的應(yīng)用被部署在一個(gè)域名的根路徑上時(shí),比如http://www.abc.com/,此時(shí)這種引入方式可以正常顯示但是如果你的應(yīng)用沒有部署在域名的根部,那么你需要為你的 URL 配置 publicPath 前綴,publicPath 是部署應(yīng)用包時(shí)的基本 URL,需要在 vue.config.js 中進(jìn)行配置。
關(guān)于vue file-loader vs url-loader
如果我們希望在頁面引入圖片(包括img的src和background的url)。當(dāng)我們基于webpack進(jìn)行開發(fā)時(shí),引入圖片會(huì)遇到一些問題。
其中一個(gè)就是引用路徑的問題。拿background樣式用url引入背景圖來說,我們都知道,webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件,因此我們樣式中的url路徑是相對(duì)入口html頁面的,而不是相對(duì)于原始css文件所在的路徑的。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問題是用file-loader解決的,file-loader可以解析項(xiàng)目中的url引入(不僅限于css),根據(jù)我們的配置,將圖片拷貝到相應(yīng)的路徑,再根據(jù)我們的配置,修改打包后文件引用路徑,使之指向正確的文件。
另外,如果圖片較多,會(huì)發(fā)很多http請(qǐng)求,會(huì)降低頁面性能。這個(gè)問題可以通過url-loader解決。url-loader會(huì)將引入的圖片編碼,生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中,最終只需要引入這個(gè)文件就能訪問圖片了。當(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)答地說,url-loader封裝了file-loader。url-loader不依賴于file-loader,即使用url-loader時(shí),只需要安裝url-loader即可,不需要安裝file-loader,因?yàn)閡rl-loader內(nèi)置了file-loader。通過上面的介紹,我們可以看到,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即可。
關(guān)于background url引入圖片時(shí)
按照上面理論,如果我采用相對(duì)路徑的方式引入圖片的話,webpack會(huì)對(duì)其require處理。
background: url("./iphonexs.png") 0 0 no-repeat;
實(shí)際上確實(shí)如此,我看到頁面的背景變成:
background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;
這是根據(jù)url-loader的配置處理的結(jié)果。
或者采用動(dòng)態(tài)style的方式:
<div :style="{"background": "url(" + require("./iphonexs.png") + ") 0 0 no-repeat"}"> </div>
以上就是“vue動(dòng)態(tài)加載本地圖片問題如何解決”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。