vue 在样式中使用背景图片

vue 在样式中使用背景图片

代码如下：

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

~ 为 Less 的转义字符

---

补充 vue 常用的图片引入

直接在 html 中使用 <img src="@/assets/404.png" alt=""> 动态 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=""> 在样式中使用 width: 100%; height: 100vh; background: url('~@/assets/404.png') no-repeat center;

~ 为 Less 的转义字符

---

参考

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