鍍金池/ 問答/HTML/ 使用vue-cli+webpack-simple搭建項(xiàng)目如何引入背景圖片

使用vue-cli+webpack-simple搭建項(xiàng)目如何引入背景圖片

我用vue-cli的webpack-simple模板搭了一個(gè)項(xiàng)目，但是發(fā)現(xiàn)項(xiàng)目無法從css中使用背景圖片

clipboard.png
然后我改為從js中綁定行間樣式

clipboard.png

clipboard.png

但是打包之后用瀏覽器打開看還是報(bào)錯(cuò)

clipboard.png
這個(gè)應(yīng)該怎么改呢？希望大家可以給我講一下，謝謝了。

回答
編輯回答
乞許
引用文字

其實(shí)，使用重命名的方法會(huì)更好一點(diǎn)，

clipboard.png

clipboard.png

2017年6月8日 11:02
編輯回答
礙你眼

在根目錄里面都會(huì)有一個(gè)static目錄，這個(gè)是用來存放靜態(tài)文件的，把靜態(tài)的文件或者圖片放在里面，引用的時(shí)候可以使用絕對(duì)路徑去取，例如：/static/example.png,里面也可以再建立一個(gè)專門放圖片的文件夾，引用的時(shí)候加上路徑便可/static/imgs/example.png

2018年7月22日 07:57
編輯回答
淺時(shí)光

有時(shí)候具體問題可能要具體分析了，排查一下是不是路徑的問題。下圖有template/script/style中的寫法。都是可以實(shí)現(xiàn)的。

clipboard.png

clipboard.png

2018年9月2日 11:14
編輯回答
凝雅
<style>
  .img{
    width: 100px;
    height: 100px;
    background: url('~@/assets/1.jpg') center center no-repeat;
    background-size: 100px auto;
  }
</style>
2018年3月28日 21:10