在.vue 文件中的style中的css中想引入assets文件夾中的圖片資源恶守，總是報(bào)錯(cuò)
這是某個(gè)vue組件中style中的css铅歼，這樣根據(jù)相對(duì)路徑就是獲取不到圖片資源
.active {
background: #111c24 url('../../assets/icon/login_active.png') no-repeat center;
}
解決辦法：
.active {
background: #111c24 url('~@/assets/icon/login_active.png') no-repeat center;
}
注意：
@ is an alias to /src
使用vue-cli腳手架的話(huà)，會(huì)自帶這個(gè)配置宣旱；
如果是自己使用webpack的話(huà)选脊，可以在webpack.base.conf.js文件中設(shè)置一個(gè)webpack的路徑別名
resolve: {
alias: {
'@': path.resolve(__dirname, '../src')
}
}
原因分析：
開(kāi)發(fā)模式下，圖片地址就是相對(duì)當(dāng)前的vue文件地址泼各，生產(chǎn)模式下的圖片地址是在發(fā)布路徑下的。
打包后引用圖片的路徑
??編譯后所有非require引入的圖片都被編譯到/dist/img/目錄下面亏拉，并且重命名扣蜻，引用路徑亦已改變，路徑隨圖片文件位置和引用圖片的文件的位置而調(diào)整了及塘。
??而require引入的圖片則生成了圖片base64編碼莽使，圖片路徑就是圖片base64編碼。
1笙僚、背景圖路徑
???編譯打包后生成的背景圖路徑格式為:?../img/##.png芳肌，
???編譯打包后所有的樣式代碼在css目錄的文件中，引用圖片的文件是樣式文件肋层，引用圖片的路徑是樣式文件相對(duì)于圖片位置的路徑亿笤，所以由'../img'開(kāi)頭。
2栋猖、圖片路徑
???編譯后的<img>引用路徑格式是:?/img/##.png净薛，和背景圖的引用路徑不一樣。
???引用圖片的文件是html蒲拉，html文件在根目錄肃拜，所以引用路徑由'/img'開(kāi)頭。
3雌团、圖片base64編碼
???使用require引入的圖片燃领，經(jīng)編譯后直接生成了圖片base64編碼。
推薦的圖片存放方式
1 如果圖片小于8k（webpack配置里設(shè)置壓縮大薪踉）柿菩，會(huì)被壓縮成base64格式，建議直接放在這個(gè)組件同級(jí)目錄
background-image: url(./img/icon-1.png);
2 如果圖片比較大雨涛，可放在項(xiàng)目根目錄的public/images里面枢舶，統(tǒng)一管理
background-image: url(/images/banner.png);
