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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 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文件操作实现代码分享
2011/09/01 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
document.execCommand()的用法小结
2014/01/08 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python制作爬虫抓取美女图
2016/01/20 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python是否适合网页编程详解
2019/10/04 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
毕业生简单求职信
2013/11/19 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
超市创业计划书
2014/09/15 职场文书
公司委托书范本5篇
2014/09/20 职场文书
婚礼答谢词
2015/01/04 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
代理词怎么写
2015/05/25 职场文书
幸福来敲门观后感
2015/06/04 职场文书
指导老师鉴定意见
2015/06/05 职场文书
MySQL优化之慢日志查询
2022/06/10 MySQL