vue css引入图片问题

Question

如图 我有在static下有一个公用的style.css 想引入 一个在assets中的一个图片文件，url该怎么写，试了半天都不对:(

Answer 1

 background: url(../assets/img/sprite-1.jpg)

使用相对路径就可以了，之前怎么用现在还是怎么用

Answer 2

vue 项目中引入图片（静态资源）方式总结

vue 文件中引用

<img src="@/assets/img/[e-mail]" >
<i :style="`background-image: url(${require('@/assets/img/[e-mail]')});`"  />

或者

<img :src="passport" >

<script>
export default {
  data() {
    return {
      passport: require('@/assets/img/[e-mail]'),
    }
  },
}
</scipt>

style 文件中引用

.demo{
  background-image: url("~@/assets/img/[e-mail]");
}

如果想要使用static而不是assets，请参考： https://github.com/vuejs/vue-...

Answer 3

vue-cli不是已经配置了 src目录了吗，如何你需要找相对目录，就一级一级的向上找，你的style.css的上一级目录是css,css的父级目录是static,很显然目录src不在static下面，当然就找不到了，，，希望你帮到你

Answer 4

static 目录下的图片也放在 static 目录下，使用相对路径即可

Answer 5

我记得我之前在用background的方式引入背景图片的时候好像是路径里不能有'-',把你的图片名称改成sprite_1.png试试

Answer 6

请问问题解决了吗？怎么解决的？

Answer 7

新版本也是建议放到 assets 里面，这样打包也好

Answer 8

如果你用的vue-cli的话，static文件夹下面的代码不会被编译，css里url是什么打包后就还是什么，src下面的assets代码和图片都会做处理的，打包路径要看你配置的assetsRoot，assetsSubDirectory参数。打包之后是没有assets文件夹的,static文件夹不做处理复制过去。