vue css引入图片问题

clipboard.png

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

回答:

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

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

回答:

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

vue 文件中引用

<img src="@/assets/img/bg@2x.png" >
<i :style="`background-image: url(${require('@/assets/img/bg@2x.png')});`"  />

或者

<img :src="passport" >

<script>
export default {
  data() {
    return {
      passport: require('@/assets/img/bg@2x.png'),
    }
  },
}
</scipt>

style 文件中引用

.demo{
  background-image: url("~@/assets/img/bg@2x.png");
}

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

回答:

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

回答:

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

回答:

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

回答:

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注