vue 在样式中使用背景图片

vue 在样式中使用背景图片

代码如下：

width: 100%;
height: 100vh;
background: url('~@/assets/404.png') no-repeat center;

~ 为 Less 的转义字符

---

补充 vue 常用的图片引入

1. 直接在 html 中使用

 <img src="@/assets/404.png" alt="">

2. 动态 src
   当路径的文件名需要拼接变量的时候，可使用 require() 引入
   在 template 的:src 或者 script 的data computed 中都可以进行 require 引入或拼接

<img :src="require('./assets/404.png')" alt=""> // 相对路径
<img :src="require('@/assets/404.png')" alt=""> // 使用路径别名
<img :src="require('./assets/'+ this.imgName)" alt=""> // 拼接路径
<img :src="img3" alt=""> // 动态路径

<script>
export default:{
    data(){
        return {
          imgName:'404.png',
          img3:require('./assets/404.png'),
        }
      },
}
</script>
// 编译后:
<img src="/assets/img/404.png" alt="">

3. 在样式中使用

width: 100%;
height: 100vh;
background: url('~@/assets/404.png') no-repeat center;

~ 为 Less 的转义字符

---

参考

https://segmentfault.com/a/1190000019495695?utm_source=tag-newest