vue的圖片路徑,和背景圖片路徑打包後錯誤解決

最近在研究vue,老實的按照官網提供的,搭建的了 webpack+vue+vuex+vue-router,,因爲是自己搭建的,所以踩了不少坑,一般問題百度都有,這個背景圖片的問題,查了很久才解決。

1、找到 config->index.js裏面,如下修改

2、找到 build->utils.js,在裏面加入一句publicPath:'../../',

 

配置修改完成,接下來,使用有兩種方式,這裏一般和文件結構有關,下面是我的文件結構下的使用

 

1、圖片資源放在 assets->img文件夾下面

img標籤引入圖片

1
<img src="../assets/img/loginback.png" class="test-img" />

 css使用圖片 

1
background: url('../assets/img/loginback.png') no-repeat top left ;

  2、圖片資源放在static->img文件夾下面

img標籤引入圖片

1
<img src="../../static/img/loginback.png" class="test-img" /><br><img src="static/img/loginback.png" class="test-img" />

  css使用圖片

 

1
background: url('../../static/img/loginback.png') no-repeat top left ;
原地址:https://www.cnblogs.com/muamaker/p/8023522.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章