Vue项目中设置背景图片
来源:互联网 发布:脉冲爆震发动机 知乎 编辑:程序博客网 时间:2024/05/16 05:08
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式:
background:url("../../assets/head.jpg");
这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题:
1》在data中定义如下:
export default { name: 'productdetailspage', data() { return { note: { backgroundImage: "url(" + require("../../assets/save.png") + ")", backgroundRepeat: "no-repeat", backgroundSize: "25px auto", marginTop: "5px", }, } },
2》通过行内样式将样式引入
<div class="note" :style ="note"></div>
就这样就能完美的解决这个问题了。
阅读全文
2 0
- Vue项目中设置背景图片
- android 项目中设置背景图片
- vue项目中浏览器图标的设置
- java中设置背景图片
- JFrame中设置背景图片
- JFrame中设置背景图片
- CSS中背景图片的设置
- JPanel面板中设置背景图片
- swing中panel设置背景图片
- iOS 中背景图片的设置
- java中JLabel设置背景图片
- vue 项目打包时样式及背景图片路径找不到
- vue打包css文件中背景图片的路径问题
- 自定义ListCtrl中设置背景图片的问题
- Qt中: 给Widget设置背景图片
- android中自定义Button,设置不同背景图片。
- Java中如何设置按钮背景图片大小
- Java 在JFrame中设置背景图片
- Java编程性能优化技巧有哪些
- 四种博弈浅谈(巴什博弈、威佐夫博弈、妮姆博奕、斐波那契博弈)
- 多线程编程之数据访问互斥——原理性
- 205. Isomorphic Strings
- java中异常及异常处理
- Vue项目中设置背景图片
- USACO section 1.3 Ski Course Design
- 五大应用优先蓝牙
- WEB前端JS弹窗
- 相机坐标,图像坐标,大地物理坐标
- 面试题14. 调整数组顺序使奇数位于偶数前面
- 安卓开发-最简单快速的仿微信聊天实现-附赠微信原生表情,QQ原生表情
- android Error:Abnormal build process termination:
- C++ 堆上创建对象与栈上创建对象的区别 创建对象时有和无花括号的区别