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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
javascript history对象详解
Feb 09 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
js前端面试之同步与异步问题详解
Apr 03 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
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
php中使用websocket详解
2016/09/23 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
js 深拷贝函数
2008/12/04 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
初学Python函数的笔记整理
2015/04/07 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Django分页功能的实现代码详解
2019/07/29 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Python偏函数实现原理及应用
2020/11/20 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
办理生育手续介绍信
2014/01/14 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
人力资源求职信
2014/05/25 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server