Vue项目中设置背景图片方法


Posted in Javascript onFebruary 21, 2018

在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>

就这样就能完美的解决这个问题了。

以上这篇Vue项目中设置背景图片方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
js倒计时抢购实例
Dec 20 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 #Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 #Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
Angular实现的进度条功能示例
Feb 18 #Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 #Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 #Javascript
Vue底层实现原理总结
Feb 17 #Javascript
You might like
一个捕获函数输出的函数
2007/02/14 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
使用js画图之饼图
2015/01/12 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
python实现简单的学生管理系统
2021/02/22 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
法学毕业生自荐信
2013/11/13 职场文书
给全校老师的建议书
2014/03/13 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
幼儿评语大全
2014/04/30 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
付款承诺函范文
2015/01/21 职场文书
感恩母亲节活动总结
2015/02/10 职场文书