您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue中圖片引入的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
圖片引入無(wú)非是路徑問(wèn)題,路徑就會(huì)有絕對(duì)路徑,和相對(duì)路徑這兩個(gè)說(shuō)法。
有一種引入方式就是直接引入絕對(duì)路徑
<img src="C:\Users\Administrator\Desktop\project\development\project_route\src\assets\image\icon_update\icon.png">
還有一種引入方式,相對(duì)路徑
<img src=".\src\assets\image\icon_update\icon.png">
當(dāng)然靜態(tài)資源的幾種引入方式
在 JavaScript 被導(dǎo)入或在 template/CSS 中通過(guò)相對(duì)路徑(以 . 開(kāi)頭)被引用。這類引用會(huì)被 webpack 處理。
諸如<img src="…">、background: url(…) 和 CSS @import 的資源
寫在 template 中內(nèi)聯(lián) style 的 background: url(…) 樣式,在當(dāng)前版本的測(cè)試中,即使使用了相對(duì)路徑也不會(huì)被webpack處理
例如,url(./image.png) 會(huì)被翻譯為 require(’./image.png’)
說(shuō)到這里,我們順便也說(shuō)一下assets這個(gè)目錄和 public這個(gè)目錄的區(qū)別
就是assets目錄,webpack會(huì)處理里面的文件
而public目錄,webpack不會(huì)處理里面的文件,在打包的時(shí)候,會(huì)直接打包生成一個(gè)public目錄,目錄中文件不會(huì)被webpack處理
放置在 public 目錄下或通過(guò)絕對(duì)路徑被引用。這類資源將會(huì)直接被拷貝,而不會(huì)經(jīng)過(guò) webpack 的處理,你需要通過(guò)絕對(duì)路徑來(lái)引用它們。
如果 URL 是一個(gè)絕對(duì)路徑,例如 /images/foo.png ,它將會(huì)被保留不變。
引入示例
正確實(shí)例
<img src="./assets/images/01.jpg" alt=""> // √ // 編譯后: <img src="/img/01.f0cfc21d.jpg" alt="">
常見(jiàn)的引入方式,路徑是固定的字符串,圖片會(huì)被webpack處理,文件若丟失會(huì)直接在編譯時(shí)報(bào)錯(cuò),生成的文件包含了哈希值
錯(cuò)誤實(shí)例
<img :src="'./assets/images/02.jpg'" alt=""> // × // 編譯后: <img src="./assets/images/02.jpg" alt="">
錯(cuò)誤的引入方式,使用:src調(diào)用了v-bind指令處理其內(nèi)容,相對(duì)路徑不會(huì)被webpack的file-loader處理
正確的引入方式
<img :src="require('./assets/images/03.jpg')" alt=""> // √ <img :src="require('./assets/images/'+ this.imgName +'.jpg')" alt=""> // √ <img :src="img3" alt=""> // √ <script> export default:{ data(){ return { imgName:'03.jpg', img3:require('./assets/images/03.jpg'), } }, } </script> // 編譯后: <img src="/img/03.ea62525c.jpg" alt="">
當(dāng)路徑的文件名需要拼接變量的時(shí)候,可使用require()引入,在 template 的:src或者 script 的datacomputed中都可以進(jìn)行require引入或拼接
<img src="/images/04.jpg" alt=""> // - // 編譯后: <img src="/images/04.jpg" alt="">
用絕對(duì)路徑引入時(shí),路徑讀取的是public文件夾中的資源,任何放置在public文件夾的靜態(tài)資源都會(huì)被簡(jiǎn)單的復(fù)制到編譯后的目錄中,而不經(jīng)過(guò) webpack特殊處理。
當(dāng)你的應(yīng)用被部署在一個(gè)域名的根路徑上時(shí),比如http://www.abc.com/,此時(shí)這種引入方式可以正常顯示
但是如果你的應(yīng)用沒(méi)有部署在域名的根部,那么你需要為你的 URL 配置 publicPath 前綴
publicPath是部署應(yīng)用包時(shí)的基本 URL,在vue.config.js中進(jìn)行配置
正確的方式
<img :src="this.publicPath + 'images/05.jpg'" alt=""> // √ // 編譯后: <img src="/foo/images/05.jpg" alt=""> <script> export default:{ data(){ return { publicPath: process.env.BASE_URL, } }, } </script> vue.config.js中: //vue.config.js module.exports = { publicPath:'/foo/', ... }
引入publicPath并且將其拼接在路徑中,實(shí)現(xiàn)引入路徑的動(dòng)態(tài)變動(dòng)
感謝各位的閱讀!關(guān)于“vue中圖片引入的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(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)容。