使用vue-cli+webpack-simple搭建项目如何引入背景图片

Question

我用vue-cli的webpack-simple模板搭了一个项目，但是发现项目无法从css中使用背景图片

然后我改为从js中绑定行间样式

但是打包之后用浏览器打开看还是报错

这个应该怎么改呢？希望大家可以给我讲一下，谢谢了。

Answer 1

在根目录里面都会有一个static目录，这个是用来存放静态文件的，把静态的文件或者图片放在里面，引用的时候可以使用绝对路径去取，例如：/static/example.png,里面也可以再建立一个专门放图片的文件夹，引用的时候加上路径便可/static/imgs/example.png

Answer 2

<style>
  .img{
    width: 100px;
    height: 100px;
    background: url('~@/assets/1.jpg') center center no-repeat;
    background-size: 100px auto;
  }
</style>

Answer 3

有时候具体问题可能要具体分析了，排查一下是不是路径的问题。下图有template/script/style中的写法。都是可以实现的。

---

Answer 4

引用文字

其实，使用重命名的方法会更好一点，