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

最近在研究vue,老實的按照官網提供的,搭建的了 webpack+vue+vuex+vue-router,,由於是本身搭建的,因此踩了很多坑,通常問題百度都有,這個背景圖片的問題,查了好久才解決。css

一、找到 config->index.js裏面,以下修改html

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

 

配置修改完成,接下來,使用有兩種方式,這裏通常和文件結構有關,下面是個人文件結構下的使用webpack

 

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

img標籤引入圖片vue-router

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

 css使用圖片 vuex

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

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

img標籤引入圖片ui

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

  css使用圖片url

 

1
background: url( '../../static/img/loginback.png' ) no-repeat top left ;
原地址:https://www.cnblogs.com/muamaker/p/8023522.html
相關文章
相關標籤/搜索