在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ .vue 文件中的style中如何正確引入assets中的圖片

.vue 文件中的style中如何正確引入assets中的圖片

在.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;
        }
回答
編輯回答
大濕胸

其實(shí)完全沒必要將圖片放在src/assets里面，這是一個(gè)坑，你那里報(bào)錯(cuò)應(yīng)該是webpack里面配置的問題。

推薦的圖片存放方式
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);
2017年12月22日 13:50
編輯回答
綰青絲

建議題主設(shè)置一個(gè)webpack的路徑別名webpack.base.conf.js中

resolve: {
    alias: {
        '@src': path.resolve(__dirname, '../src/assets')
    }
}

然后使用的時(shí)候

 .active {
          background: #111c24 url('~@src/icon/login_active.png') no-repeat center;
}

@src就可以準(zhǔn)確的定位到assets目錄了，同時(shí)也省去了各種..的寫法，簡單明了。

2018年3月4日 08:51
編輯回答
好難瘦

開發(fā)模式下，圖片地址就是相對(duì)當(dāng)前的vue文件地址，生產(chǎn)模式下的圖片地址是在發(fā)布路徑下的。

2018年3月15日 22:52
編輯回答
尤禮

根據(jù)你的描述，圖片資源最好放到static文件夾，assets文件夾放的一般是最后會(huì)壓縮合并的資源，比如css文件，
在main.js文件中引用

import './assets/css/common.css'
2017年4月14日 00:19